使用过滤器在 Vue.js 中格式化数据

那些来自 Angular 国家的人可能熟悉过滤器(在 Angular 2+ 中的管道)。你知道,那些有管道和函数的奇怪的小表达式,在你的绑定值之后,并以某种方式使它看起来完全不同? 是的。

写一个过滤器

让我们来看看如何在 Vue.js 中实现自己的布尔到字符串过滤器:

 1<template>
 2  <div>
 3    <!-- Is it true? It's true (or It's false). -->
 4    <p>Is it true? {{booleanValue | boolean(`It's true`, `It's false`)}}.</p>
 5    <!-- Is it true? Yes (or No). -->
 6    <p>Is it true? {{booleanValue | boolean}}.</p>
 7  </div>
 8</template>
 9
10<script>
11
12// The first argument is always the passed value. After that any number of arguments may be passed.
13const booleanFilter = function(value, trueText, falseText) {
14  return value ? trueText || 'Yes' : falseText || 'No';
15}
16
17export default {
18  filters: {
19    boolean: booleanFilter
20  },
21
22  data() {
23    return {
24      booleanValue: false
25    }
26  }
27}
28</script>

您还可以使用 Vue.filter(名称,filterFunction)在全球范围内注册过滤器:

1import Vue from 'vue';
2
3const booleanFilter = function(value, trueText, falseText) {
4  return value ? trueText || 'Yes' : falseText || 'No';
5}
6
7Vue.filter('boolean', booleanFilter);
8
9...

这就是它所拥有的全部!

值得注意的是,过滤器只能在胡须和绑定表达式中使用({{thingAlike filter}} 和 :prop="thingAlike filter"). 与 Angular 不同,它们不能在 v-if 或 v-for 中使用。

社区过滤器

以下是一些有用的社区过滤器,您可能会发现它们对您的项目有帮助:

vue2-filters - 从Vue 1的标准过滤器移至Vue 2.
vue-moment - Moment.js过滤器来格式化时间值
vue-filters-kit - 一些有用的过滤器,特别是用于显示字节和百分比值的过滤器。