过滤器：让要显示在页面上的内容进行重新筛选 分为俩部分js和html
过滤器可分为全局过滤器和局部过滤器
全局过滤器：
··js
vue filter("过滤器的名字"，function(){
})
··html:
{{msg|过滤器的名字}}
局部过滤器
``js
new Vue({
filters:{
过滤器名：function(){
}
}
})
例子：若代码中为8浏览器中显示为08;若代码中为18浏览器中显示18
<div class="box">
<p>{{9|add}}</p>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("add",function(data){
if(data<10){
return "0"+data
}else{
return data
}
})
new Vue({
el:".box"
})
</script>
<div class="box">
<p>{{9|add}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box"
filters:{
add:function(data){
if(data<10){
return "0"+data
}else{
return data
}
}
}
})
</script>
表盘：(俩种方法写在一起)
<div class="box">
{{new Date()|number}}
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("number",function(data){
var year=data.getFullYear();
var month=data.getMonth()+1;
var ri=data.getDate();
var day=data.getDay();
var hours=data.getHours();
var minutes=data.getMinutes();
var seconds=data.getSeconds();
return data.innerHTML="现在时间是"+year+"年"+month+"月"+ri+"日,星期"+day+","+hours+"点"+minutes+"分"+seconds+"秒";
})
new Vue({
el:".box",
/*filters:{
number:function(data){
var year=data.getFullYear();
var month=data.getMonth()+1;
var ri=data.getDate();
var day=data.getDay();
var hours=data.getHours();
var minutes=data.getMinutes();
var seconds=data.getSeconds();
return data.innerHTML="现在时间是"+year+"年"+month+"月"+ri+"日，星期"+day+","+hours+"点"+minutes+"分"+seconds+"秒";
}
}*/
filters:{
number:function(data){
return data.getFullYear()+"年"+data.getMonth()+"月"+ri+"日,星期"+data.getDay()+","+data.getHours()+"点"+data.setMinutes()+"分"+data.getSeconds()+"秒"；
}
}
})
</script>
数组API总结
push():向数组末尾添加一个或多个元素
unshift(): 向数组的开头添加一个或多个元素
pop(): 删除数组最后一个元素
shift(): 删除数组第一个元素
sort(): 给数组排序
reverse(): 颠倒数组项在数组中的位置
concat(): 合并数组
slice(): 指定的位置开始删除指定的数组项，并且将删除的数组项构建成一个新数组;可以接受一个或两个参数，要返回项的起始和结束位置，返回所截取数组的项，但是不包括结束位置的项，不会改变原数组
splice():主要用法是向数组的中部插入项，会改变原数组，是最强大的数组方法。最多指定3个参数。 对一个数组做删除、插入和替换
indexOf(): 从前向后查找元素在数组中位置
lastIndexOf(): 从后向前查找元素在数组中位置
forEach()、every()、some()、filter()和map()：数组迭代
(1)every():对数组的每一项运行给定函数，如果数组的每一项都返回true，则返回true。对数组应用该方法，有返回值为true或false
(2)some():对数组的每一项运行给定函数，如果数组的任一项都返回true，则返回true。对数组应用该方法，有返回值为true或false
(3)filter():对数组的每一项运行给定函数，返回该函数中会返回true的项组成的数组。有返回值，为符合条件的项组成的数组
(4)map()::对数组的每一项运行给定函数,有返回每次函数调用的结果组成的数组。
(5)forEach():对数组的每一项运行给定函数,这个方法没有返回值。本质上与使用for循环迭代数组是一样的
reduce(): 数组中的每个值（从左到右）开始合并，最终为一个值
reduceRight(): 数组中的每个值（从右到左）开始合并，最终为一个值
String():把对象的值转换为字符串
join():把数组的所有元素放入一个字符串元素通过指定分隔符分隔
计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
``html
<div class="box">
<p>{{msg.split(" ").reverse().join("===")}}</p>
</div>
``js
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello vue"
}
})
</script>
这样写页面复杂不清晰占内存 不便于后期的维护可改为：
<div class="box">
<p>{{msg}}</p>
<h5>{{add}}</h5>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
msg:"hello vue"
},
computed:{
add:function(){
return this.msg.split(" ").reverse().join("===")
}
}
})
</script>
利用计算属性求和
<div class="box">
<button v-on:click="add">点击</button>
<p>总价：{{push}}元</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
methods:{
add:function(){
this.package1.count++
}
},
computed:{
push:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
}
})
</script>
