前言
前面介绍到了计算属性和侦听属性，除此之外Vue还专门提供了过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号|指示。
基本使用
<body>
<div id="app">
<!-- 在双花括号中 -->
{
{message | toUpper}}<br>
<!-- 在 `v-bind` 中 -->
<input type="text" :value="'时间' | addContext">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 全局注册
Vue.filter('toUpper', function (value) {
if (!value) return ''
value = value.toString()
return value.toUpperCase()
})
var app = new Vue({
el: '#app',
data: {
message: "abcd"
},
// 局部注册
filters: {
addContext(value) {
return value + "：" + Date.now()
}
}
})
</script>
</body>
如以上实例所示，和自定义指令一样，过滤器可以实现局部注册和全局注册。过滤器可以用在两个地方：{
{ }}和 v-bind(:) 表达式。过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，过滤器函数将会收到 管道前的值作为第一个参数。
过滤器的特性
上面说到过滤器可以在{
{ }}和 v-bind(:)这两个地方使用，此外过滤器有一些特性：
- 可以接受参数
- 过滤器可以串联使用
过滤器是 JavaScript 函数，因此可以接收参数，不过要注意的是，函数默认会把管道前的值作为第一个参数，自定义参数在后面：
<div id="app">
{
{message | toUpper("one","two")}}
</div>
<script>
// 定义三个参数
Vue.filter('toUpper', function (value, args1, args2) {
if (!value) return ''
value = value.toString()
return value.toUpperCase() + args1 + args2
})
</script>
当我们定义多个过滤器的时候，可以串联使用，数值会一层一层往后传递直到最后一个方法。把基础案例修改以下：
<div id="app">
{
{message | toUpper("one","two") | addContext}}<br>
<input type="text" :value=" 'axx' | toUpper('1','2') | addContext ">
</div>
<!--
ABCDonetwo：1610772645949to
AXX12：1610772645949
-->
以input为例，首先会把‘axx’传递到toUpper()把单词转化成大写，把参数拼接，此时返回的是AXX12，然后再把AXX12传递给addContext()，把时间戳进行拼接返回最后的结果AXX12：1610772645949。