Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器——
一、vue实例属性gfhg
1.el获取vue绑定的元素的，可以对元素的style进行操作
2.data 获取vue实例中的数据
3.options获取vue实例中的自定义属性
4.refs 获取所有带ref属性的元素
二、计算属性
对于比较复杂的逻辑运算，都应该使用计算属性
例：
<div class="itany">
<p>{{mag}}</p>
<h1>{{list}}</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
mag:'hello Vue'
},
computed:{
list:function(){
return this.mag.split(' ').reverse().join('===');
}
}
})
</script>
三、过滤器——保留两位小数
<div class="itany">
<p>{{1381.322165|addZero}}</p>
</div>
<script src="vue.js"></script>
<script>
// 全局
Vue.filter('addZero',function(data){
return data.toFixed(2);
})
new Vue({
el:'.itany'
// 局部
// filters:{
// addZero:function(data){
// return data.toFixed(2);
// }
// }
})
四、过滤器——获取时间
<div class="itany">
<p>{{new Date()|houers}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
el:'.itany',
filters:{
houers:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'号,星期'+data.getDay()+";"+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>
计算属性
对于比较复杂的逻辑运算，都应该使用计算属性，以便于后期维护
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性1</title>
</head>
<body>
<div class="itany">
<!-- 标签中-->
<h1>{{mes.split(' ').reverse().join('+++')}}</h1>
<!-- 计算属性-->
<a href="#">{{app}}</a>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
new Vue({
el:".itany",
data:{
mes:'Vue hello'
},
computed:{
app:function(){
return this.mes.split(' ').reverse().join('+++');
}
}
})
</script>
</body>
数组
string数组的定义有三种：
Stringarr[] =newString[10];//创建一个长度为10的String 类型数组。
Stringarr[] = {"张三","李四"};
String[] arr =newString[10];
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
语法
arrayObject.join(separator)
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
Array.splice()方法是在数组中插入或删除元素的通用方法。
不同于slice()和concat(),splice()会修改调用的元素数组。
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法
arrayObject.push(newelement1,newelement2,....,newelementX)
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
语法
arrayObject.unshift(newelement1,newelement2,....,newelementX)
reverse() 方法用于颠倒数组中元素的顺序。
语法
arrayObject.reverse()
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
语法
arrayObject.unshift(newelement1,newelement2,....,newelementX)
pop() 方法用于删除并返回数组的最后一个元素。
语法
arrayObject.pop()
