0


vue过滤器filter的使用

    vue允许自定义过滤器,我们通常用于对文本进行格式化一类的操作。如:将返回值 'abc' 设置为 'ABC' 显示在页面中;又或者,如果返回值为 'a' 页面显示 '张三',返回值为 'b' 页面显示 '李四'。总之,对当前文本的各种操作,几乎都可以用filter来解决。

注意:过滤器仅可以在两个地方使用:1、花括号中;2、v-bind中;

// 在花括号中使用
<div>{{ message | msgFilter }}</div>

// 在v-bind中使用
<div v-bind:id="rawId | idFilter"></div>

** 一、全局过滤器**

    vue项目中创建全局过滤器:在main.js中注册全局过滤器,且必须放在vue实例创建之前。然后才可以在各个组件中使用。
//main.js

Vue.filter('filter1',function(value){
    return value.chartAt(0).toUpperCase()+value.slice(1)
})

new Vue({
    //.......
})

二、局部过滤器

局部过滤器,在组件中定义,与data,created,methods等同级。

filters:{
    filter1:function(value){
        return value.chartAt(0).toUpperCase()+value.slice(1)
    }
}

三、多个过滤器串联

我们在应用中,可以依次使用两个或多个过滤器,每个过滤器的参数为上一次过滤器返回的结果。

<div> {{ message | filter1 | filter2 }} </div>
    在以上例子中,有两个过滤器 filter1 和 filter2。首先会将 message 传入 filter1 中进行第一次处理,然后再将 filter1 的处理结果,传递到 filter2 中进行第二次处理,最终,将filter2的处理结果渲染到页面中。

四、过滤器添加参数

过滤器同样是一个js函数,因此可以添加参数。

<div> {{ message | filter1('param1','param2') }} </div>
    如上所示,filter1 有一个默认参数 message ,我们自定义添加了两个参数 'param1' 和 'param2',此时,在实际的过滤器函数中一共接收到三个参数:message,'param1','param2';
filters:{
    filter1:function(value,value1,value2){
        console.log(value)   // message变量的值
        console.log(value1)  // param1
        console.log(value2)  // param2
    }
}

五、过滤器 this 指向问题

filter过滤器中的this指向,并不是vue中的this,而是undefined;

因此,如果我们想要获取data中的数据,有两种方法:1、改变this指向;2、传参;

1、改变this 指向

<template>
  <div class="file-bg"> {{ fileObj | typeFilter}} </div>
</template>
<script>
  let that;
  export default {
    data(){
      return{
        fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    beforeCreate(){
      that = this;
    },
    filters:{
      typeFilter:function(obj){
        console.log(that.classObj)
      }
    }
  }
</script>

2、传参

<template>
  <div class="file-bg"> {{ fileObj | typeFilter(classObj) }} </div>
</template>

<script>
  export default {
    data(){
      return{
        fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    filters:{
      typeFilter:function(obj,classObj){
        console.log(obj)
        console.log(classObj)
      }
    }
  }
</script>

本文转载自: https://blog.csdn.net/Hello_MrShu/article/details/127363940
版权归原作者 Hello_MrShu 所有, 如有侵权,请联系我们删除。

“vue过滤器filter的使用”的评论:

还没有评论