Vue全局定义过滤器

需求：

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>

⑤ 使用前后效果对比：

------- 本文完 赞一个再走？ -------