在项目中使用vueFilter,如何使用vue过滤器

语法

html...


<div> {{ data1 | filterFun1 }} </div>

vue...

data(){
    return{
        data1:'我是参数1'
    }
}

filters:{
  filterFun1(value){
    console.log(value)
    // 我是参数1
  }
}

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

多个参数

html...


<div> {{ data1,data2 | filterFun1 }} </div>

vue...

data(){
    return{
        data1:'我是参数1',
        data2:'我是参数2'
    }
}

filters:{
  filterFun1(value1,value2){
    console.log(value1,value2)
    // 我是参数1,我是参数2
  }
}

html...


<div> {{ data1,data2 | filterFun1('aa','bb') }} </div>

vue...

data(){
    return{
        data1:'我是参数1',
        data2:'我是参数2'
    }
}

filters:{
  filterFun1(value1,value2,a,b){
    console.log(value1,value2)
    // 我是参数1,我是参数2
    console.log(a,b)
    // aa  bb
  }
}

 多层过滤器

html...


<div> {{ data1 | filterFun1 | filterFun2 | filterFun3 }} </div>

vue...

data(){
    return{
        data1:6,
      
    }
}

filters:{
  filterFun1(value){
    console.log(value)
    // 6
    return value * 2
  },
  filterFun2(value){
    console.log(value)
    // 12
    return value + 8
  },
  filterFun3(value){
    console.log(value)
    // 20
  }
}

 左边一个一直是右边的参数