Vue 过滤器（filters）全局注册

什么是过滤器？

官方解释：被用于一些常见的文本格式化
我们自己解释：就是后台返回的 0 1 2 3 我们转为 ”今天“，”明天“，”后天“，”大后天“

1.0 局部注册

<template>
  <div>
    <h1>局部注册过滤器</h1>
    <div>我今天状态：{{ status | statusFilter}}</div>
    <h3>我的钱在{{ whereBank | whereBankFilter }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status:0,
      whereBank:'1'
    }
  },
   filters:{
     statusFilter(val){
       if( val == 0 ){
         return '很好'
       }else{
         return '一般般'
       }
     },
     whereBankFilter(val){
       let obj = {
         '0':'工商银行',
         '1':'建设银行',
         '2':'人民银行',
         '3':'工商银行',
         '4':'华夏银行',
       }
       return obj[val] || '没有存款'
     }
   }
}
</script>

就是这么简单便捷，但是，但是呢....

这个银行的过滤呀，我是没有写完的，写完的话可是要很多很多的，我们又再下一个组件想用怎么办呢？

当然我们可以 c + v 一下，可这显得我们不高级了，怎样才能让我们显得高级呢，

那就是定义一次，我想在哪里用就在哪里用

2.0 全局注册

新建文件/src/common/filter/index.js

export default {
    // 银行过滤
    whereBankFilter(val){
        let obj = {
            '0':'工商银行',
            '1':'建设银行',
            '2':'人民银行',
            '3':'工商银行',
            '4':'华夏银行',
        }
        return obj[val] || '没有存款'
    },
    // 成绩合格不合格过滤
    scoreTest(val){
        if(val>=60){
            return '你的成绩合格了'
        }else{
            return '再接再厉呀'
        }
    }
}

修改 main.js

// ... 省略
import filters from './common/filters/index'

Object.keys(filters).forEach(key=>{
    Vue.filter(key,filters[key])
})
// ... 省略

我们直接在组件里面用就行了

<template>
  <div>
    <h1>全局注册过滤器</h1>
    <div>我今天状态：{{ status | statusFilter}}</div>
    <h3>我的钱在{{ whereBank | whereBankFilter }}</h3>
    <h4>我的成绩是60，结果是{{ 60 | scoreTest}}</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status:0,
      whereBank:'1'
    }
  },
   filters:{
     statusFilter(val){
       if( val == 0 ){
         return '很好'
       }else{
         return '一般般'
       }
     }
   },
}
</script>

补充：过滤器默认参数就是 | 前面的值，假设我要传参数怎么办？

<div> {{name | nameFilter( param1, param2 ,'123') }} </div>
// 接受参数
nameFilter(val,param1, param2 , param3){
    // val 对应的是name值哦
}

3.0 在methods中使用过滤器方法

filters:{
    // 成绩合格不合格过滤
    scoreTest(val){
        if(val>=60){
            return '你的成绩合格了'
        }else{
            return '再接再厉呀'
        }
    }
},
methods:{
    // 查看成绩
    lookScope(val){
        // this.$options.filters使用过滤器
        let res = this.$options.filters[scoreTest](val)
        console.log(res)
    }
}

他们都假装颓废，你可别上当。