自定义过滤器 局部过滤器 全局过滤器 过滤器的封装

自定义过滤器

作用:

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化

使用场景:

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

用法:

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

一.自定义局部过滤器

1.创建局部自定义过滤器

定义位置

局部自定义过滤器需要在filters结构中定义

语法

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

2.使用局部自定义过滤器

1. 通过管道符来使用过滤器
   管道符：|
   语法：{{ 源数据 | 过滤器名称([参数]) }}

2. 参数说明

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

示例

<td>{{value.time | dateFormat('-')</td>
------------------------------------------------------------
// 添加局部过滤器
filters:{
    dateFormat(value,spe){
        let y = value.getFullYear()
        let m = value.getMonth() + 1
        let d = value.getDate()
        return `${y}${spe}${m}${spe}${d}`
    }
}

二.自定义全局过滤器

1.创建全局自定义过滤器

说明：

1. 使用Vue.filter创建全局自定义过滤器
2. 在每个组件中都能使用

语法:

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

示例:

 import Vue from 'vue'

export const dateFormat= 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. 如果没有对过滤器传递参数，默认就会传递管道符前面的数据
2. 如果手动传递了参数，也不会影响默认数据的传递，意味过滤器的用户自定义参数是从参数列表的第二个开始

2.使用全局自定义过滤器

1. 引入全局过滤器
2. 使用全局过滤器通过管道符 | 使用过滤器
3. 参数说明
   1. 如果没有对过滤器传递参数，默认就会传递管道符前面的数据
   2. 也可以手动传递参数，但是手动传递了参数，也不会影响默认数据的传递，意味过滤器的用户自定义参数是从参数列表的第二个开始

示例

// 引入全局指令
import dateFormat  from '@/utils/myfilters.js'

// 使用全局过滤器
<td>{{value.time | dateFormat('-')}}</td>
----------------------------------------------------------------------
// 定义全局指令
import Vue from 'vue'

export const dateFormat = 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. 不用再引入vue
2. 封装过滤器的函数主体
3. 暴露封装的自定义过滤器
4. 在需要的位置使用解构的方式引入
5. 注册过滤器
6. 使用

代码演示

// 引入全局过滤器
import {dateFormat} from '../utils/myfilters.js'
-----------------------------------------------------------------
// 添加局部过滤器,同时还可以实现过滤器的注册
filters:{
    dateFormat
}
-----------------------------------------------------------------
<td>{{value.time | dateFormat('-')}}</td>
-----------------------------------------------------------------
// 定义指令--封装
export const dateFormat= function(value,spe){
    let y = value.getFullYear()
    let m = value.getMonth() + 1
    let d = value.getDate()
    return `${y}${spe}${m}${spe}${d}`
}

总结

封装暴露 > 组件当中(解构引入 注册 使用)