Vue过滤器-filter

过滤器,过滤东西呗.
把一个值丢进过滤器,然后过滤器对此值进行过滤.返回过滤后的数据.

Vue过滤器分全局过滤器和组件过滤器.

全局过滤器.

定义

// 第一个参数是需要过滤的数据.
// 第二个参数是给过滤器传递的值.
  Vue.filter('global-filter',(val,...args)=>{
    console.log(`需要过滤的数据是:${val}`)
    return val + ' 过滤器追加的数据'
  })

var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    })

 <div id='app'>
    <p>{{oldValue | global-filter}}</p>
  </div>

注意,过滤器在插值表达式里使用 lunix 命令行的管道语法.

{{ oldValue | global-filter }}

把 oldValue 的值原封不动的传递给 global-filter.

在 global-filter 方法定义里,第一个参数 val 就是 oldValue

结果:

过滤结果

当然,过滤器本来就是一个方法,方法肯定是可以传参数的.

 Vue.filter('global-filter',(val,...args)=>{[图片上传中...(15445114994941.jpg-9fecae-1544511784154-0)]

    args.forEach(item=>{
      val += ` ${item} - `
    })
    return val + ' 过滤器追加的数据'
  })

 <div id='app'>
    <p>{{oldValue | global-filter(1,2,3,4,5)}}</p>
  </div>

结果

给过滤器传递参数

组件过滤器

全局过滤器通过 Vue.filter('filtername',fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用.

局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.

具体语法:

 var app = new Vue({
    el: '#app',
    data: {
      price:null,
      oldValue: '原始数据'
    },
    methods: {},
    // 定义组件过滤器
    filters: {
      priceFmt(val,location) {
        switch(location) {
          case 'usa':
            return '$' + val
            break
          default:
          return val
        }
      }

    })

除了使用范围不同,全局过滤器和组件过滤器没有任何其他的区别.