浅谈Vue中过滤器filter的使用{{ 变量名 | 过滤器名 }}

在 vue2.0 之前，是有内置过滤器的，在2.0中已经没有内置的过滤器了，但我们可以自定义过滤器。

关于 vue 过滤器，在官方文档中是这样说明的：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据，它的作用是过滤数据，就是对数据进行加工处理并返回处理后的数据，比如做一些数据格式上的修改，状态转换等。

过滤器分为两种

• 组件内的过滤器(组件内有效)

• 全局过滤器(所有组件共享)

  定义过滤器
  
      第一个参数是过滤器的名字
  
      第二个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么，有什么作用)。
  
  过滤器的功能函数
  
      声明 function(data,argv1,argv2...){}
  
      第一个参数是传入的要过滤的数据，即调用时管道符左边的内容。
  
      第二个参数开始往后就是调用过滤器的时候传入的参数

  过滤器的使用

  • 先注册，后使用

  • 组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

  • 全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据

  • 使用 {{ 数据 | 过滤器名 }}

        // 使用过滤器时需要添加管道符号（ | ）作为分隔，管道符 | 右边是过滤器名称，即文本的功能函数
    ​
    <!-- 在双花括号中 -->
    {{ message | 过滤器名称 }}
    ​
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="id | 过滤器名称"></div>

    下面说一下局部过滤器和全局过滤器的区别：

  •     局部过滤器：

  •  

    data () {
        return {
            msg: 'hello world'
        }
    },
    //定义私用局部过滤器。只能在当前 vue 对象中使用
    filters: {
        dataFormat: (msg, a) => { // msg表示要过滤的数据，a表示传入的参数
            return msg + a;
        }
    }
    ​
    <p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!

  • 自定义全局过滤器：

  • Vue.filter('过滤器名称', function(val) { // val表示要被处理的数据
        // 过滤器业务逻辑，要有返回值
    })
    ​
    <div>{{ msg | 过滤器名称 }}</div>
    <div v-bind="msg | 过滤器名称"></div>

    千万千万千万要注意：

    1. 全局注册时是 filter 没有 s ， 而组件过滤器是 filters，是有 s 的，虽然写的时候没有 s 也不报错，但是过滤器是没有效果的。

    2. 当全局过滤器和局部过滤器名字重复的时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用

    3. 一个表达式可以使用多个过滤器，其执行顺序从左往右，前一个过滤器的结果作为后一个过滤器的被处理数据，所以要注意使用顺序

        1 熟悉 vue 的童鞋会知道，过滤器有时同methods、computed、watch一样可以达到处理数据的目的，但又不能替代它们，因为它不能改变原始值。如果一个过滤器的内部特别复杂，可以考虑把它写成一个计算属性，因为计算属性本身带有缓存，可复用性强，而过滤器一般用来做一些简单的操作。
        2 
        3 在实际开发中，全局的过滤器要比局部过滤器使用的更广泛一些，说白了我们为什么要使用过滤器，其实就跟使用函数是一样，把一些方法封装，供其它组件使用，这样调用起来更方便也更快捷。
        4 
        5 大家知道全局过滤器是在 main.js 中定义的，但万一项目过大，有多个过滤器，那 main.js 就一堆代码，为了项目模块化，最好是有专门的目录来统一存放这些过滤器，然后把处理函数给抽离出去，放在一个.js文件中，下边通过示例代码展示。
        6 
        7   示例一（局部过滤器）：
        8 
        9 　　格式化时间或日期，补全指定位数，不足个位数补0
       10 // filter/index.js文件
       11 export default {
       12     dateFormat: value => {
       13         const dt = new Date(value * 1000)
       14     
       15         const y = dt.getFullYear()
       16         const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定位数，"要补全的符号或值")
       17         const d = (dt.getDay() + '').padStart(2, '0')
       18         
       19         const hh = (dt.getHours() + '').padStart(2, '0')
       20         const mm = (dt.getMinutes() + '').padStart(2, '0')
       21         const ss = (dt.getSeconds() + '').padStart(2, '0')
       22         
       23         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
       24     }
       25 }
       26 ​
       27 // 在 .vue 文件中使用局部过滤器
       28 <script>
       29     import filters from '../filter'
       30 ​
       31     export default {
       32         ... ... 
       33         filters: { ...filters },
       34         data() {
       35             return {}
       36         }
       37     }
       38 </script>
       39 ​
       40 <div> 日期：{{ date | dateFormat }} </div>

         示例二（全局过滤器）：
       
       通用字典项的回显：比如性别男女或通用选择是否，后端传给我们的数据是0、1，我们需要在页面上显示男女或是否
       // constants/dictionary.js 文件
       ​
       export const GENDER_MENU = [
           { code: 0, label: '男'},
           { code: 1, label: '女'}
       ];
       ​
       export const COMMON_MENU = [
           { code: 0, label: '否'},
           { code: 1, label: '是'}
       ];
       ​
       export default {
           GENDER_MENU, COMMON_MENU
       }
       
       // filter/dict.js 文件
       ​
       import Dict from '../constants/dictionary'
       ​
       export const genderMenu = {
           func: value => {
               const target = Dict.GENDER_MENU.filter(item => {
                   return item.code = value;
               })
               return target.length ? target[0].label : value;
           }
       }
       ​
       export const commonMenu = {
           func: value => {
               const target = Dict.COMMON_MENU.filter(item => {
                   return item.code = value;
               })
               return target.length ? target[0].label : value;
           }
       }
       
       // filter/index.js 文件
       ​
       import * as filters from './dict' // 导入过滤函数
       ​
       const Install = Vue => {
           // 导入的 filters 是一个对象，使用Object.keys()方法，得到一个由key组成的数组，遍历数据，让key作为全局过滤器的名字，后边的是key对应的处理函数，这样在任何一个组件中都可以使用全局过滤器了
           Object.keys(filters).forEach(key => {
               Vue.filter(key, filters[key].func)
           })
           /*
           for(const _filter in filters) {
               Vue.filter(`${_filter}`, filters[_filter].func)
           } */
       }
       ​
       export default Install
       
       // main.js 文件
       ​
       ... ...
       import filters from  './../filter/index'
       Vue.use(filters)
       ... ...
       
       
       // .vue 文件中使用全局过滤器
       ​
       <p>性别：{{ gender | genderMenu }}</p>