巧用Vue.js的过滤器Filter

前言

在前端的项目开发中，经常会涉及时间戳、字符串大小写，数字金钱等进行格式化操作，多个组件模块有时都需要相同功能。如果重复性的在每个组件中都定义该方法，则会带来以下问题：

• 一则比较麻烦，是重复性的工作，
• 二则升级后期维护时，需要每个组件中都对该方法进行升级，更加复杂。

那如何解决这个问题呢？

优化方案

借助Vue的过滤器Filter定义工具类utls，可以全局注册到Vue中，以供各个模块进行调用。

// 定义Filter
Vue.filter('timeFormat', () => {
    // ...
})

// Filter使用 -- 此处| 为管道符
{{ time |  timeFormat }}

实战一下

以格式化时间戳功能为例

目录结构

src
    utls --- 工具类目录
        timeformat.js --- 格式化时间戳
        index.js
    pages
        Index.vue       
    App.vue 
    main.js

借助npm包time-stamp包实现时间戳的格式化

// 下载包
npm i time-stamp -D

---

// utls/timeformat.js
import timeStamp from 'time-stamp'

/**
* 每个工具类都定义成此形式，有助于统一注册过滤器
* name 表示过滤器的名称
* func 表示过滤器的方法
*/
export default {
  name: 'timeFormat',
  // 此处接收formatStr参数，可允许在各个组件中调用，返回不同格式化形式
  func: (time, formatStr) => {
    return timeStamp(formatStr, new Date(time))
  }
}

---

// utls/index.js 工具类统一路口
import Vue from 'vue'

// 加载时间戳过滤器
import timeFormat from './timeformat'

// 定义过滤器列表 --- 允许有多个
const filterList = [
  timeFormat
]

// 统一注册全局过滤器
filterList.map((filter) => {
  Vue.filter(filter.name, filter.func)
})

组件中使用过滤器

<template>
    <!-- 双花括号 - mustache语法 -->
    {{ time | timeFormat('YYYY年MM月DD日 HH:mm:ss') }}
    
    <!-- 属性中定义 -->
    <a :title="time | timeFormat('YYYY年MM月DD日 HH:mm:ss')">时间</a>
</template>
<script>
export default {
  data () {
    return {
      time: ''2019-10-01 11:22:11''
    }
  }
}
</script>

在Filter过滤器调用时，管道符|左侧的变量会默认作为过滤器函数的第一个参数，这是在定义过滤器时要注意的事项。

扩展

1. 在Vue.js中过滤器允许对同一变量使用多个过滤器进行处理，方便快捷，调用方式也非常简单。

    // 生效方向为：从左向右依次处理生效
    {{ msg | filterA | filterB }}
   

2. 允许在各个组件中定义局部过滤器Filter，如果局部过滤器与全局过滤器拥有相同变量名，则局部过滤器生效

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得收藏、转发、点击右下角按钮在看，推荐给更多小伙伴呦，欢迎多多留言交流...

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！

胡哥有话说