巧用Vue.js的过滤器Filter

胡哥有话说

发布于 2019-07-25 15:48:56

3.2K0

文章被收录于专栏：胡哥有话说胡哥有话说

前言

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

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

那如何解决这个问题呢？

优化方案

借助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过滤器调用时，管道符|左侧的变量会默认作为过滤器函数的第一个参数，这是在定义过滤器时要注意的事项。

扩展

在Vue.js中过滤器允许对同一变量使用多个过滤器进行处理，方便快捷，调用方式也非常简单。 // 生效方向为：从左向右依次处理生效 {{ msg | filterA | filterB }}
允许在各个组件中定义局部过滤器Filter，如果局部过滤器与全局过滤器拥有相同变量名，则局部过滤器生效