Vue过滤器快速上手

前言

由于本地过滤器个人感觉用处一般般，意义不大。
所以这次主要是介绍全局过滤器并且跟之前一样带上示例demo代码。
这次的完整示例代码将分两种，一种是最快速的做法，一个便于文件整理的推荐做法

过滤器介绍

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
---- Vue.js文档

快速入门过滤器

定义组件内本地过滤器以及使用方法

<template>
  <div>
    ...
    <d-button v-bind:id="id | idFormat"></d-button>
    <d-button>{{ timer | dateFormat }}</d-button>
    ...
  </div>
</template>
<script>
export default {
  data(){
     ...
  },
  ...
  // 定义过滤器
  filters: {
    dateFormat(value){
      let d = new Date(value)
      return d
    },
    idFormat(id){
      ... 
    }
  }
  ...
};
</script>

定义全局过滤器

Vue.filter('dateFormat', function (value) {
  let new_value = ""
  ...
  return new_value
})
new Vue({
  // ...
})

注意事项和其他能力讲解

1、当全局过滤器和本地过滤器重名时，会采用本地过滤器。
2、过滤器总函数会接收表达式的值，作为第一个参数（ {{ timer | dateFormat }} -> timer 即时 dateFormat方法的第一个参数）
3、过滤器可以串联

 {{ timer | dateFormatA | dateFormatB  }}

前一位的值将作为参数传入后一个方法
即 timer 将作为参数传入 dateFormatA
而 dateFormatA的返回值将会作为参数传递到 dateFormatB
最终页面显示的为 dateFormatB 的返回值
4、过滤器是 JavaScript 函数，因此可以接收参数(下方vue 文档示例)

  {{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
5、多参数传参的另外一种做法, 个人认为可能写起来更为舒服的一种方式(将在完整代码内和末尾说明)

快速定义一个全局过滤器，以及调用的完整demo代码

这次的代码是，实现一个格式化时间戳的过滤器，并且可传入参数选择返回值。

新建一个 dateFormat.js 文件

const add_zero = function (n) {
  return n > 10 ? n : "0" + n
}
const dateFormat = function (time, mode = 'default') {
  if (!isNaN(time)) {
    time = Number(time)
  }
  let d = new Date(time)
  let yyyy = d.getFullYear()
  let MM = add_zero(d.getMonth() + 1)
  let dd = add_zero(d.getDate())
  let HH = add_zero(d.getHours())
  let mm = add_zero(d.getMinutes())
  let ss = add_zero(d.getSeconds())
  let mode_time_str = {
    default: `${yyyy}/${MM}/${dd} ${HH}:${mm}:${ss}`,
    'yyyy-mm-dd': `${yyyy}/${MM}/${dd}`,
    'hh-mm-ss': `${HH}:${mm}:${ss}`
  }
  return mode_time_str[mode]
}
export default dateFormat

在Vue实例化前导入并定义

import Vue from 'vue'
...
import dateFormat from "./dateFormat.js"
Vue.filter('dateFormat', filters[key])
...
new Vue({
 ...
})

在页面中调用

<template>
  <div>
    <div>单参：{{ timer | dateFormat }}</div>
    <div>多参 Vue文档的方法：{{ timer | dateFormat(mode) }}</div>
    <div>多参 另外一种做法：{{ timer,mode | dateFormat }}</div>
  </div>
</template>
/// 两种传递多参的方法
// 第二种做法会vscode会检测误报，但实际上项目编译和调试都是没有任何问题
<script>
export default {
  data() {
    return {
      timer: Date.now(),
      mode: "yyyy-mm-dd",
    };
  },
};
</script>

便于文件整理的推荐做法 -- 批量定义过滤器

新建一个 dateFormat.js 文件 ( 此处内容不变，建文件夹统一存放这些方法文件啊之类的，就不说了，都懂)

新建一个 filters.js 文件统一文件导入

import dateFormat from "./dateFormat.js"  // 导入你的方法文件
// 统一挂载
const filters = {
  dateFormat
}
// 暴露出去
export default filters

批量定义

import Vue from 'vue'
...
import filters from "./filters.js"
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key])
})
new Vue({
 ...
})

页面调用 ( 此处内容不变 )

结尾

这次的代码和之前的也是一样，都是为了快速展示而写的简单demo,有些粗糙，请多包涵。
另外，全局组件那一篇其实还有一些东西或者说技巧可以继续说，比如一样可以做批量注册，下次再补充吧。

部分资料引用

过滤器 -- Vue

前言