vue的filter（过滤器）-JXin的博客

温馨提示

该文章距离上次更新已经过去了 1376 天，文章内容可能已经过时。

文章图片

过滤器
- 过滤器串联
- 过滤器还能接收多个参数
过滤器和计算属性的区别
过滤器中获取不到this

过滤器

vue中的过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该添加在JS表达式的尾部，由“管道”符号表示。

例如：定义一个局部过滤器

message会作为参数传给capitalize

<template>
   <div id="app">{{ message | capitalize }}</div>
</template>

<script>
export default {
 data() {
   return {
     message: "john",
    };
  },
 filters: {
   capitalize: function(value) {
     if (!value) return "";
     value = value.toString();
     return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

也可以通过Vue实例使用全局过滤器

Vue.filter("capitalize", function(value) {
 if (!value) return "";
 value = value.toString();
 return value.charAt(0).toUpperCase() + value.slice(1);
});

1
2
3
4
5

过滤器串联

{{ message | filterA | filterB }}

message作为参数值传入filterA，filterA再将格式化后的结果传给filterB

过滤器还能接收多个参数

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

message会作为第一个参数传给filterA，arg1作为第二个参数，arg2作为第三个参数

过滤器和计算属性的区别

过滤器不依赖于实例，可以定义一个全局过滤器，在多个实例中使用。而计算属性依赖于实例，要在某一个实例中使用
过滤器没有缓存机制，计算属性有
过滤器只能读取，计算属性如果定义为对象，可以读也可以写
过滤器适用于同样计算方法的属性计算，而计算属性只使用于单个属性的计算
过滤器可以接收多个参数进行计算，而计算属性只能根据data中定义的变量进行计算
过滤器是定义了一个方法，而计算属性相当于定义了一个变量

过滤器中获取不到this

在过滤器中this为undefined，也就是在filters中获取不到this，这个问题尤大有提到过，因为过滤器应该是一个纯函数，不应该使用到上下文，所以在vue中过滤器获取不到this是有意这么做的，他还提到如果需要使用到this，可以使用一个方法，获取使用计算属性。
this undefined in filters #5998

除了使用计算属性和方法外，如果坚持要在过滤器中使用this，可以在data中将this保存下来，然后传入到过滤器中。例如：

<template>
	<div>
		{{name | nameFilter(that)}}
	</div>
</template>
<script>
export default {
	data() {
		that: this
	},
	filters: {
		nameFilter(name, that) {
			console.log(that)
		}
	}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17