Vue 可以定义过滤器来进行文本格式化，过滤器可以用在插值表达式 {{}} 和 v-bind 中。过滤器需要添加在表达式的尾部用管道符 | 来连接
将需要过滤的文本作为参数传入过滤器中，最后显示的是过滤器处理过后的结果
<div>{{ message | filter}}</div>
<div v-bind:id="message | filter"></div>
1
2
3
2
3
多个过滤器可以连接在一起，前一个过滤器的结果作为后一个过滤器的参数传入，最终显示最后的处理结果
<div>{{ message | filter1 | filter2}}</div>
1
# 全局过滤器
可以使用 Vue.filter() 定义全局过滤器，这样每个 Vue 实例都可以拿到这个过滤器， filter 中有两个参数，第一个是过滤器的名称，也就是管道符后的名称，第二个参数是过滤器函数。过滤器函数的第一个参数是管道符前面传入的要处理的文本，之后可以根据需要添加额外的参数，同时需要返回处理的结果用来显示或传入下个过滤器。
Vue.filter('filterName', function (value) {
return result
})
1
2
3
2
3
下面通过过滤器将输入的字母全部转换为大写
<html>
<div id="vue-example-1">
<input type="text" v-model="message">
<p>过滤结果:{{message | uppercase}}</p>
</div>
<script>
Vue.filter('uppercase', function (message) {
return message.toUpperCase()
});
new Vue({
el: '#vue-example-1',
data: {
message: "",
}
});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
过滤器还可以添加多个参数，下面的例子通过添加参数将输入文本中所有的 love 替换为 ❤️
<html>
<div id="vue-example-2">
<input type="text" v-model="message">
<p>过滤结果:{{message | replace('love', '❤️')}}</p>
</div>
<script>
Vue.filter('replace', function (message, arg1, arg2) {
// 使用正则表达式全局替换 arg1
return message.replace(RegExp(arg1,"g"), arg2)
});
new Vue({
el: '#vue-example-2',
data: {
message: "",
}
});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 私有过滤器
在 Vue 对象内部定义的过滤器是私有过滤器，这种过滤器只在该 Vue 实例指定的区域内有效
下面的例子将上面转换大写字母的例子改为私有过滤器
<html>
<div id="vue-example-3">
<input type="text" v-model="message">
<p>过滤结果:{{message | uppercase}}</p>
</div>
<script>
new Vue({
el: '#vue-example-3',
data: {
message: "",
},
// 定义私有过滤器
filters: {
uppercase: function(message) {
return message.toUpperCase()
},
}
});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
就近原则
过滤器调用的时候采用就近原则，如果私有过滤器和全局过滤器名称一致优先调用私有过滤器。