Vue过滤器的使用

发表于 分类于 阅读次数： 本文字数： 321 阅读时长 ≈ 1 分钟

过滤器概念

Vue.js 允许你自定义过滤器，可被用做一些常见的文本格式化，过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，有“管道”符指示；

代码示例：

1
2
3
4
5
6
7
8
9
// 过滤器的定义语法
{{name | nameope}} // mustache插值表达式

// 全局过滤器
Vue.filter("nameope", (data) => {
  // 在这里做一些对mustache插值数据的渲染前处理
  return data;
  // return 处理完的数据
});

过滤器中匿名函数的第一个参数是从管道符前接收到的原值，从第二个参数起可以传入需要参与对原值处理的值
如：

1
2
3
Vue.filter("nameope", (data, arg) => {
  return data + arg;
});

过滤器可以多次调用

1
{{ msg | format | test }}

msg 值会先被 format 处理，处理之后再丢给 test 处理，从左往右依次顺序执行。

下面是一个对 ISO 时间字符串进行过滤格式化的实例：

1
2
3
4
5
6
7
8
9
10
// 全局的过滤器，进行时间的格式化
Vue.filter('dateFormat', dateStr => {
  // 根据给定的时间字符串得到相应的时间
  let dt = new Date(dateStr)

  let y = dt.getFullYear()
  let m = dt.getMonth() + 1
  let d = dt.getDate()

  return `${y}-${m}-${d}`

私有过滤器：

1
2
3
4
5
6
new Vue({
  el: "#app",
  data: {},
  methods: {},
  filters: {}, // 这里是私有过滤器
});