今天学习了过滤器；
vue.js允许在表达式后面添加可选的过滤器，以管道符表示，eg:{{message|x}};
自vue2.0后，过滤器都需要自定义了，过滤器分为全局过滤器和局部过滤器。
过滤器就是让要先是在页面上的内容进行重新筛选。
A:
1.>全局过滤器：
语法：vue.filter('过滤器名称'，function（val){}
val是原始数据，即需要过滤的数据；处理数据后的数据用return返回；tofixed()方法可把number四舍五入为指定小数位数的数字。
eg：return'$'+val
Vue.filter('number',function(val){
return val.tofixed(2)
})
new Vue({
el:'#itany',
})
2.>局部过滤器：
（在vue实例中进行定义）
·语法：filters：{‘过滤器名称’：function（val）{
coading...........
return过滤后的值
}
}
new Vue({
el:'#itany',
//局部过滤器
filters:{
add:function(val){
if(val<10){
return '0'+'val';
}else{
return val;
}
}
}
})
全局过滤器：在全局都可以使用；
局部过滤器：只在声明这个过滤器的vue实例中可以使用；
过滤器的串联使用：{{data|过滤器A|过滤器B}};
eg：
//调用
<p>{{msg|F}}</p>
<p>{{msg|A}}</p>
//全局过滤器
vue.filter（'F',function(val){
return'$'+val;
}）
//局部过滤器
filterts:{
'A':function(val){
return'$'+val;
}
}
B:
计算属性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>
<a href="#">{{count}}</a>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
msg:"hello vue"
},
computed:{
count:function(){
return this.msg.split('').reverse ().join('===')
}
}
})
</script>
</body>
</html>
效果图：
360截图20180925132611779.jpg
计算属性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="../vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
package1:{count:5,price:3},
package2:{count:8,price:4}
},
computed:{
total:function(){
return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods:{
add:function(){
this.package1.count++
}
}
})
</script>
</body>
</html>
效果图：
360截图20180925132927249.jpg
360截图20180925133013386.jpg
360截图20180925133024658.jpg
C:数组API:
1.>string（）把数组转换成字符串；
var arr=[1,2,3];
var str=string(arr);
console.log(str);
2.>join('拼接符')：
join(''),引导中间加入符号为拼接符，没有符号则默认为string属性；
var arr=[1,2,3];
var str=arr.join('');
var str=arr.join('_');
console.log(str);
3.>splice(index,howmany):
splice()用于插入，删除或替换数组的元素；
index是规定从何处删除/添加元素；howmany规定该删除多少元素；
1.添加元素：
var arr=[1,2,3,4,5];
arr.splice(2,0,'one','two');
console.log(arr);
结果为[1,2,'one','two',3,4,5];
2.移除元素并添加新元素：
var arr=[1,2,3,4,5];
arr.splice(2,1,'three');
console.log(arr);
结果为[1,2,'three',4,5];
3.从一个位置开始删除几个元素：
var arr=[1,2,3,4,5];
arr.splice(2,3);
console.log(arr);
结果为[1,2];
4.>concat():
concat用于连接两个或多个数组；
var arr1=[1,2,3];
var arr2=[4,5];
var arr3=[6];
var arr=arr1.concat(arr2,arr3);
console.log(arr);
结果为[1,2,3,4,5,6];
5.>slice:
slice可从已有数组中返回选定元素，由下标决定，下标也可为负数，与正数顺序相反；
var arr=[1,2,3,4,5];
var arr1=arr.slice(2,4);
var arr2=arr.slice(-3,-1);//负数应从小往大写
console.log(arr1);
console.log(arr2);
结果为[3,4];
6.>reverse：用于颠倒数组中元素的顺序；
var arr=[1,2,3];
arr.reverse();
console.log(arr);
结果为[3,2,1];
7.>unshift():可以向数组开头添加一个或多个新元素，并返回新长度
var arr=[3,4,5];
arr.unshift(1,2);
console.log(arr);
结果为[1,2,3,4,5];
8.>push():可以向数组结尾添加一个或多个新元素，并返回新长度；
var arr=[1,2,3];
arr.push(4,5);
console.log(arr);
结果为[1,2,3,4,5];
9.>shift():删除数组第一个元素，并返回长度；
var arr=[1,2,3];
arr.shift();
console.log(arr);
结果为[2,3];
10.>pop():删除数组最后一个元素，并返回长度；
var arr=[1,2,3];
arr.pop();
console.log(arr);
网友评论