欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue过滤器-filter

程序员文章站 2024-02-09 17:53:22
...

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

    })

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

相关标签: vue 过滤器