vue之filter过滤器

概念：

• 过滤器就是一个数据经过了这个过滤器之后出来另一样东西。
• 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 的值原封不动的传递给 global-filter

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

局部过滤器（组件过滤器）

• 全局过滤器通过 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
        }
      }
    })

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

使用位置

1、在双花括号插值

{{ 'ok' | globalFilter }}

2、在v-bind表达式中使用

<div v-bind:data="'ok' | globalFilter" ></div>

3、滤器的连用

{{ message | filterA | filterB }}

上述代码中，message是作为参数传给filterA 函数，而filterA 函数的返回值作为参数传给filterB函数，最终结果显示是由filterB返回的。
代码如下：

  <div id="app">
        {{'2020'|dateFilter|lastFilter}}
    </div>

new Vue({
    el:'#app',
    data:{

    },
    filters: {
        lastFilter(val){
            console.log(arr);
              return val+'年';
        },
        lastFilter(val){
           return val+'好';
        }
    }
})

结果：

2020年好

4、过滤器参数

{{ message | filterA('arg1', arg2) }}

上述代码中，filterA的第一个参数是message，依次是‘arg1’,arg2

<div>{{'2020'|filterA('12','22')}}</div>
<script>
 filters:{
        filterA(val,arg1,arg2){
          return val+'-'+arg1+'-'+arg2;
        }
    }
 </script>

5、{{ ‘a’,‘b’ | filterB }}

<div>{{'hello','world'|filterA}}</div>
<script>
 filters:{
        filterA(arg1,arg2){
          return arg1+arg2;
        }
    }
</script>

结果是：

hello world

理论：

vue中自定义过滤器

• 过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据
• 过滤器分为全局过滤器和局部过滤器

全局过滤器

全局过滤器是通过Vue.filter()来定义的，定义好后，它在所有组件中都可以使用。第一个是过滤器名称 第一个参数是需要过滤的值 第二个参数是给过滤器传递的值

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

局部过滤器

局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
过滤器的使用方式是，在双花括号或v-bind中通过一个管道符 ‘|’ 来拼接,
过滤器在vue3中被移除了 功能需要使用计算属性代替