需求:
Vue开发过程中,通常会把后台数据特意处理之后再展示在页面上,例如展示百分比 / 时间戳 / 计算结果等...
如果选择特意在methods中处理就会显得代码比较凌乱,且每个实例下面都需要复制该方法,无论是从性能上还是代码可维护性上来讲都不是很好的解决办法!
filter:
Vue提供的过滤器(filter)可以很好的解决这个问题,且允许自定义过滤规则、可全局使用、可维护性很高。what is filter?
使用:
① 博主在使用过滤器时通常会把这部分独立出来、全局使用,以方便后期维护;
② 项目 “src” 目录下,新建 "filter > filter.js" ,“main.js”中全局引入:
//main.js
import fliter from './filter/filter' //全局过滤器
③ 编写过滤规则:
全局使用时必须引入Vue实例,且filter接受两个参数,第一个是该过滤器唯一的name,第二个参数是过滤规则函数;
import Vue from 'vue' //引入Vue
//时间戳过滤器
Vue.filter('Datefilter', function (date) {
if (typeof date == 'object') return '/' //处理null undefined
return new Date(date).toLocaleDateString().replace(/\//g, "-") //转换规则
})
④ 使用方式:
1、插值表达式中使用:(跟在插值表达式尾部,以管道符 '|' 分隔,且可以串联 例 “data | name1 | name2 ”)
<el-table-column label="借用日期" align="center">
<template slot-scope="scope">{{scope.row.borrowDate | Datefilter }}</template>
</el-table-column>
2、在v-bind属性绑定中使用:(跟在绑定属性值尾部,同样以管道符分隔)
<div :returnDate="returnDate | Datefilter"></div>
⑤ 使用前后效果对比:
------- 本文完 赞一个再走? -------