Vue过滤器-filter

Vue中的过滤器不能替代Vue中的methods、computed或者watch，因为过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持API响应的干净，并在前端处理数据的格式。在你希望避免重复和连接的情况下，它们也可以有效地封装成可重用代码块背后的所有逻辑。

过滤器作用：让要显示在页面上的内容进行重新筛选

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
        }
      }

    })

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