过滤器
1.过滤器：让要在显示在页面上的内容进行重新筛选
包括两种类型： 全局过滤器和局部过滤器
全局过滤器：JS分为两个部分,一个是Vue.filter('过滤器的名字’,function(){}),另一个是new Vue({el:‘id名或class名’,data:{})
局部过滤器：JS只有一部分new Vue({el:‘id名或class名’,data:{},methods:{},filters:{过滤器名字：function(){}}})
格式:JS和HTML
例子;
效果1：让单位数变为两位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{2|addZero}}</p>
</div>
<script src='js/vue.js'></script>
<script>
//全局过滤器
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
效果2：保留两位小数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{123.41233|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
//全局过滤器
// Vue.filter("number",function(data){
// return data.toFixed(2)
// })
new Vue({
el:'#itany',
//局部过滤器
filters:{
number:function(data){
return data.toFixed(2)
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="a">
<p>{{s|sm}}</p>
</div>
<script src="js/vue.js"></script>
<script>
/* Vue.filter('sm',function(da){
return da.toFixed(2)
})*/
new Vue({
el:'#a',
data:{
s:123.456
},
filters:{
sm:function(da){
return da.toFixed(2)
}
}
})
</script>
</body>
</html>
保留两位小数：toFixed(n)可以进行四舍五入n表示保留几位小数
var num=123.456
console.log(num.toFixed(2));
````
效果3：显示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{new Date()|date}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter("date",function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日,星期'+data.getDay()+','+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>
`````
知识点：
var date=new Date();
console.log(date);
//年
var year=date.getFullYear();
//月
var mon=date.getMonth()+1;
//日
var tian=date.getDate();
//星期
var day=date.getDay();
//小时
var hours=date.getHours();
//分钟
var min=date.getMinutes();
//秒
var sec=date.getSeconds();
console.log(sec)
document.querySelector('h1').innerHTML='现在时间是'+year+'年'+mon+'月'+tian+'日,星期'+day+','+hours+'点'+min+'分'+sec+'秒';
2.计算属性：计算属性关键词computed。
含义：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
计算属性的用法：在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
例子：
效果1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
//这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。
<a href="#">{{count}}</a>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
computed:{ //计算属性
count:function(){
return this.msg.split(' ').reverse().join('===')
}
}
})
</script>
</body>
</html>
知识点：
var str='hello vue'
var strs=str.split(' ');//切割
console.log(strs);
var str1=strs.reverse();//翻转
console.log(str1);
var str2=str1.join('===');//拼接
console.log(str2);
效果2：简单计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加货</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
package1:{price:2,count:3},
package2:{price:4,count:6}
},
computed:{
total:function(){
return this.package1.price*this.package1.count+this.package2.price*this.package2.count
}
},
methods:{
add:function(){
this.package1.count++;
}
}
})
</script>
</body>
</html>
3.数组API:
(1)string（）; 把数组转换成字符串
例：
var arr=[1,2,3,4,5];
var str=String（arr）;
console.log（str）;
//1,2,3,4,5
(2)join() 方法将数组（或一个类数组对象）的所有元素连接到一个字符串中，不会改变数组
例：
var arr['h','e',l'',''l,'o'];
var str=arr.join（'-'）;//h-e-l-l-o
var str=arr.join（''）;//hello
var str=arr.join（' '）;//h,e,l,l,o
console.log（str）;
(3)concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
用法：
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
例：
①var arr=['a','b','c'];
var str=arr.concat（1,2）; console.log（str）;//['a','b','c',1,2]
②var arr=['a','b','c'];
var arr2=[1,2,3];
var str=arr.concat（arr2）; console.log（str）;//['a','b','c',1,2,3]
```
(4)slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。
slice（starti,endi+1）; 截取
特点：
①含头不含尾
②如果省略第二个参数，默认从starli开始截取到结尾
③如果一个参数都不写，相当于复制原素组
④支持负数参数
例：
```
var arr=['a','b','c','d','e','f','g'];
//下标 0 1 2 3 4 5 6
// -7 -6 -5 -4 -3 -2 -1
var arr.slice（3,5）;[//'d',''e];
var arr.slice（3）;//['d','e','f','g'];
var arr.slice（）;//['a','b','c','d','e','f','g'];
var arr.slice（-4,-2）;//['d','e'];
console.log（str） ;
(5)splice（starti,n）; （n代表个数）
例：
var arr=['a','b','c','d','e','f','g'];
①删除
var str=arr.splice（3,2）;
consolie.lig（arr）;//['a','b','c','f','g'];
②插入
var str=arr.splice（3,0,'1','2'）;
consolie.lig（arr）;//['a','b','c','1','2','d','e','f','g'];
③替换
var str=arr.splice（3,2,'A','B'）;
consolie.lig（arr）;//['a','b','c','A','B','f','g'];
(6)reverse（）; 翻转
例：
var arr=[1,2,3,4,5];
var str=arr.reverse（）;
console.log（str）;//[5,4,3,2,1]
(7)push() 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。给数组末
尾添加元素
例：
var arr=[1,2,3,4,5];
var str=arr.push（'a'）;
console.log（arr）;//[1,2,3,4,5,'a']
(8)pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
使用：
arr.pop()
注意：
如果你在一个空数组上调用 pop()，它返回 undefined。
例：
var arr=[1,2,3,4,5];
var str=arr.pop（）;
console.log（arr）;//[1,2,3,4]
(9)unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。
例：
var arr=[1,2,3,4];
var str=arr.unshift（'fff'）;
console.log（arr）;//['fff',1,2,3,4]
```
(10)shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
注意：
shift 方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果 length 属性的值为 0 (长度为 0)，则返回 undefined。
例：
````
var arr=[1,2,3,4];
var str=arr.shift（）;
console.log（arr）;//[2,3,4]
