2021-03-20

最新推荐文章于 2024-09-20 21:52:54 发布

今天也是努力的打工人

最新推荐文章于 2024-09-20 21:52:54 发布

阅读量64

点赞数

文章标签： es6 vue.js

本文链接：https://blog.csdn.net/weixin_48092622/article/details/115027577

版权

随笔记录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;

}