vue基础（自定义局部与全局过滤器）

创建局部自定义过滤器

1. 定义位置
   局部自定义过滤器需要在filters结构中定义
2. 语法

filters:{
    过滤器名称:function(源数据，[其它参数.....]){
        // 业务处理
        return 结果
    }
}

3. 参数

• 过滤器有一个默认的参数，就是管道符前面的源数据,就算用户传递了自定义参数也不会影响默认参数的传递
• 意味着第一个参数永远是管道符前面的源数据，用户参数是从参数列表第二位开始计算

4. 代码

  // 添加过滤器
  filters: {
    // 过滤器名称:function(params) { } | 过滤器名称(){}
    dateFormat: function (data, spe) {
      console.log(data, spe);
      // 转换类型为日期类型
      data = new Date(data)
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      let day = data.getDate()
      return `${year}${spe}${month < 10 ? "0" + month : month}${spe}${day}`
    }
  }

5. 使用过滤器

    <td>{{ value.time | dateFormat("-") }}</td>

创建全局自定义过滤器

• 使用Vue.filter创建全局自定义过滤器
• 在每个组件中引入之后都能使用
  语法：

Vue.filter(过滤器名称,function(源数据，[其它参数.....]){
    // 业务处理
    return 结果
})

参数说明

• 如果没有对过滤器传递参数，默认就会传递管道符前面的数据
• 如果手动传递了参数，也不会影响默认数据的传递，意味过滤器的用户自定义参数是从参数列表的第二个开始
  代码：

import Vue from 'vue'

Vue.filter('dateFormat',function(value,spe){
    let y = value.getFullYear()
    let m = value.getMonth() + 1
    let d = value.getDate()
    return `${y}${spe}${m}${spe}${d}`
})

使用全局自定义过滤器

1. 引入全局过滤器

import  '@/utils/myfilters.js'

2. 使用全局过滤器
   通过管道符 | 使用过滤器

<td>{{value.time | dateFormat('-')}}</td>

3. 参数说明

• 如果没有对过滤器传递参数，默认就会传递管道符前面的数据
• 也可以手动传递参数，但是手动传递了参数，也不会影响默认数据的传递，意味过滤器的用户自定义参数是从参数列表的第二个开始