Vue自定义过滤器filter

最新推荐文章于 2024-04-08 09:32:00 发布

L289121

最新推荐文章于 2024-04-08 09:32:00 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/l289121/article/details/108697628

版权

本文介绍了Vue框架中的过滤器功能，包括全局过滤器和局部过滤器的定义与使用。详细阐述了过滤器在双花括号插值、v-bind表达式、过滤器链式调用以及传递参数等方面的应用，帮助开发者更好地理解和掌握Vue中的数据处理技巧。

摘要由CSDN通过智能技术生成

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。
vue中的过滤器分为两种：局部过滤器和全局过滤器

全局过滤器

// global-filter是过滤器名称
// 函数第一个参数是需要过滤的数据.
// 函数第二个参数是给过滤器传递的值.
  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>

{{ oldValue | global-filter }}把oldValue来定义,它定义好了之后,在所有的组件内都可以使用.
部过滤器,定义在组件内部 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
        }
      }
    })

注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

使用位置
1 . 在双花括号插值{{ 'ok' | globalFilter }}
2 .在v-bind表达式中使用<div v-bind:data="'ok' | globalFilter" ></div>
3 .滤器的连用{{ message | filterA | filterB }}
4 .过滤器参数{{ message | filterA('arg1', arg2) }}
5 . {{ 'a','b' | filterB }}