随笔记录3
使用场景:
因为接口返回的某些字段(如数组)不是我们想要的,渲染到页面上的数据需要我们做处理,我们可以用filters,computed,也可接口返回字段直接map。
这篇先记录filters的四种用法:
使用方法:
方法一:全局注册使用filters:
(1)放在Vue实例化前面使用
html:
<html>
<head></head>
<body>
<div>
<p>{{message|list1 222}}</p>
//过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算
</div>
</body>
</html>
<script>
Vue.filter("list1", function(value1,value2) {
//全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
return value1 + value2 ;
});
var myVue = new Vue({
el: ".test",
data: {
message:1111
}
});
</script>
(2)放在实例内部使用:
<p>{{message|list1 222}}</p>
//html 同上
<script>
var myVue = new Vue({
el: ".test",
data: {
message:1111
},
filters:{
list1:function(value1,value2){
return value1 + value2 ;
}
}
});
</script>
方法二:利用vue提供的filters钩子
<li v-for="item in arr" :key="item.id" >{{item.name | filter1 | filter2("name") }}</li>
//添加两个过滤器,注意不要冲突
// | 后面可以多个filters函数,前面filters函数return的结果是后面filters函数的参数。
//并且可以在过滤函数后面加上()里面加上其他的参数
filters:{ //钩子
filter1(val){ //过滤器函数的名字filter1,val是传递过来的参数
return val //操作之后将结果返回出去
},
filter2(val1,val2) {
//此处val1是经过上一个过滤器filter1操作之后的返回的结果,val2是参进来的参数
return val1+val2
}
}
方法三:在methods的方法中使用:
this.$options.filters ['filter1'] ('name') // []里面是过滤器名 ,()里面是 参数
也可以在参数后面再加函数参数this.add(“name”)。
方法四:使用js中的迭代函数filter
var arr2 = list.filter((x, index,self) => {
// x: 表示当前对象
// self:表示该数组对象
// index: 表示当前元素下标
return self.indexOf(x) === index
})
此方法判断去重机制: 在filter方法中,遍历目标数组,对于数组中的每个元素,都会被自己定义的那个匿名函数执行一次,每一次返回一个boolean值,如果返回false,则会将该元素从数组中去除.
最后filter方法会返回一个新的数组对象作为处理结果.
这种方式的局限性: 由于里面的判断相等,用的是indexOf(x)—获取当前元素出现的第一次出现的位置,再判断该位置是否与当前元素下标相等,如果不相等,说明在其他位置出现的相同的值,就返回false.这种方式只能用于简单元素的数组,不能用于判断对象.
若某对象中要判断多个字段同时重复:
arr2 = arr.filter(x,index,self) => {
let arrNames = [],
let arrIds = [],
arr.forEach((item )=>{
arrNames.push(item.name);
arrIds.push(item.id);
})
let one = arrNames.indexOf(x.name) === index;
let two = arrIds.indexOf(x.id) === index;
return one || two;
}