1，过滤器：让要显示在页面上的内容进行重新筛选
2，过滤器分为全局过滤器和局部过滤器
全局过滤器：
<div id="itany">
<h1>{{new Date()|time}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter('time',function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期 '+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
局部过滤器：
<div id="itany">
<h1>{{new Date()|time}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
filters:{
time:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
}
}
})
</script>
3，计算属性
在模板中放入太多逻辑会让模板过重且后期难以维护，例：
<div id="add">
{{ message.split(' ').reverse().join('===') }}
</div>
对于任何复杂逻辑，都应当使用计算属性，例：
<div id="itany">
<p>{{count}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{
count:function(){
//split 切割 reverse 翻转 join 拼接
return this.msg.split(' ').reverse().join('===');
}
}
})
</script>
计算属性应当写在computed里；
4，数组API
（1） String();--------将数组转化为字符串，返回一个字符串形式的数组，不会改变原数组；
（2） join();-----------将数组变为字符串，默认是通过逗号连接，可以通过参数指定连接符号，返回一个连接后的数组，不会改变原数组；
（3） concat();-------连接一个或多个数组，返回一个连接之后的数组，不会改变原数组；
（4） slice();----------从数组截取一段元素组成一个新的数组，返回一个截出的那段元素组成的新数组，不会改变原数组，如果参数只写一个，表示从这个位置开始直到数组结束；
（5） splice();--------splice(起始位置，要删除的元素个数，要添加的元素的值1，值2……)，作用是对数组元素进行增删改操作，
增：splice(找到要添加元素的下标位置，0，要添加元素的值1，值2……)；
删：splice(找到要删除元素的下标位置，要删除的个数)；
改：splice(找到要修改元素的下标位置，要修改的个数，要添加的元素)；
返回值是一个被删除的元素组成的数组，会改变原数组；
（6） reverse();------作用是翻转数组元素，第一个变成最后一个，最后一个变成第一个，返回值是一个翻转后的数组，会改变原数组；
（7） push();---------从数组的后面添加元素，返回一个新数组的长度，会改变原数组，添加新元素后的数组；
（8） pop();-----------删除数组的最后一个元素，返回一个被删除的元素，会改变原数组，添加新元素后的数组；
（9） unshift();-------作用是从数组前添加元素，返回一个新数组的长度。会改变原数组；
（10） shift();--------从前面删除元素，返回的是被删除的元素，会改变原数组
网友评论