乐趣区

vue过滤器filter的使用

jiezi

在 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>
自定义全局过滤器
Vue.filter('过滤器名称', function(val) { // val 示意要被解决的数据
    // 过滤器业务逻辑，要有返回值
})
​
<div>{{msg | 过滤器名称}}</div>
<div v-bind="msg | 过滤器名称"></div>
部分过滤器
data () {
    return {msg: 'hello world'}
},
// 定义私用部分过滤器。只能在以后 vue 对象中应用
filters: {dataFormat: (msg, a) => { // msg 示意要过滤的数据，a 示意传入的参数
        return msg + a;
    }
}
​
<p>{{msg | dataFormat('!')}}</p> // 后果: hello world!

留神：

  1. 全局注册时是 filter 没有 s，而组件过滤器是 filters，是有 s 的，尽管写的时候没有 s 也不报错，然而过滤器是没有成果的。
  2. 当全局过滤器和部分过滤器名字反复的时候，会以就近准则进行调用，即：部分过滤器优先于全局过滤器被调用
  3. 一个表达式能够应用多个过滤器，其执行程序 从左往右，前一个过滤器的后果作为后一个过滤器的被解决数据，所以要留神应用程序

相熟 vue 的童鞋会晓得，过滤器有时候同 methods、computed、watch 一样能够达到解决数据的目标，但又不能代替它们，因为它不能扭转原始值。如果一个过滤器的外部特地简单，能够思考把它写成一个计算属性，因为计算属性自身带有缓存，可复用性强，而过滤器个别用来做一些简略的操作。

在理论开发中，全局的过滤器要比部分过滤器应用的更宽泛一些，说白了咱们为什么要应用过滤器，其实就跟应用函数是一样，把一些办法封装，供其它组件应用，这样调用起来更不便也更快捷。

大家晓得全局过滤器是在 main.js 中定义的，但万一我的项目过大，有多个过滤器，那 main.js 就一堆代码，为了我的项目模块化，最好是有专门的目录来对立寄存这些过滤器，而后把处理函数给抽离进来，放在一个.js 文件中，下边通过实例代码展现。

示例一（部分过滤器）

格式化工夫或日期，补全指定位数，有余个位数补 0 

// filter/index.js 文件
export default {
    dateFormat: value => {const dt = new Date(value * 1000)
    
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2,'0') // .padStart(指定位数，" 要补全的符号或值 ")
        const d = (dt.getDay() + '').padStart(2,'0')
        
        const hh = (dt.getHours() + '').padStart(2,'0')
        const mm = (dt.getMinutes() + '').padStart(2,'0')
        const ss = (dt.getSeconds() + '').padStart(2,'0')
        
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
}
​
// 在 .vue 文件中应用部分过滤器
<script>
    import filters from '../filter'
​
    export default {
        ... ... 
        filters: {...filters},
        data() {return {}
        }
    }
</script>
​
<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 文件

// 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 文件

// 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 文件

// main.js 文件
​
... ...
import filters from  './../filter/index'
Vue.use(filters)
... ...

在.vue 文件中应用全局过滤器

// .vue 文件中应用全局过滤器
​
<p> 性别：{{gender | genderMenu}}</p>
退出移动版