过滤器

过滤器（Filters）是Vue为开发者提供的功能，常用于文本格式化。

过滤器可以用在两个地方：插值表达式 和 v-bind属性绑定。

过滤器应被添加在JavaScript表达式的尾部，由“管道符”进行调用。

示例代码：

1
2
3
4
5
6
7
<div id='app'> 
    <!-- 在双花括号中通过“管道符”调用capitalize过滤器，对message的值进行格式化 -->
    <p>{{ message | capitalize }}</p>

    <!-- 在 v-bind 中通过“管道符”调用 formatId 过滤器，对rawId的值进行格式化 -->
    <div v-bind:id="rawId | formatId"></div>
</div>

定义过滤器

在创建Vue实例时，可以在fliters节点中定义过滤器。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
    <div id='app'> 
        <!-- 在双花括号中通过“管道符”调用capitalize过滤器，对message的值进行格式化 -->
        <p>{{ message | capitalize }}</p>

        <!-- 在 v-bind 中通过“管道符”调用 formatId 过滤器，对rawId的值进行格式化 -->
        <div v-bind:id="rawId | formatId"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'hello, vue.js',
                info: 'title info'
            },
            filters: {
                capitalize(str) {
                    return str.charAt(0).toUpperCase() + str.slice(1)
                }
            }
        })
    </script>
</body>

私有过滤器和全局过滤器

在fliters节点下定义的过滤器成为“私有过滤器”，它只能在当前vm实例控制的el区域内使用。

如果希望在多个vue实例之间共享过滤器，则可以按照如下格式定义全局过滤：

1
2
3
4
5
6
7
// 全局过滤器 - 独立于每个vm实例之外
// Vue.filter() 方法接收两个参数：
// 1.全局过滤器的“名字”
// 2.全局过滤器的“处理函数”
Vue.filters('capitalize', (str)  => {
    return str.charAt(0).toUpperCase() + str.slice(1)
})

过滤器传参

过滤器的本质是JavaScript函数，因此可以接收参数。

示例代码：

1
2
3
4
5
6
7
8
9
10
<!-- arg1 和 arg2 是传递给fliterA的参数 -->
<p> {{ message | filterA(arg1, arg2) }} </p>

...

<script>
    Vue.filter('filterA', (msg, arg1, arg2) => {
		//代码
	})
</script>

兼容性问题

Vue1和Vue2支持过滤器，Vue3移除了过滤器。

官方推荐使用计算属性或方法代替被移除的过滤器功能。