Vue.js 的 filter 是一個在模板中用來格式化文本的函數或過濾器，可以全局注冊或在組件中注冊。Vue.js 內置了幾個過濾器，例如 currency（格式化金額）、capitalize（將單詞首字母大寫）、pluralize（將單詞轉換成復數形式）等等，同時也支持自定義過濾器。

定義一個全局過濾器：

Vue.filter('reverse', function(value) {
return value.split('').reverse().join('');
});

使用：

<!-- 在模板中使用 -->
{{ 'hello world' | reverse }} // dlrow olleh
<!-- 在指令中使用 -->
<div v-bind:id="'user_' + userId | reverse">...</div> // <div id="dresu">...</div>

定義一個局部過濾器：

Vue.component('my-component', {
filters: {
reverse: function(value) {
return value.split('').reverse().join('');
}
},
template: '<div>{{ message | reverse }}</div>',
data: function() {
return {
message: 'hello world'
}
}
})

直接在組件模板中綁定過濾器：

<div>{{ message | reverse }}</div>

當用戶點擊按鈕時更新消息的值：

<div id="app">
<p>{{ message | capitalize }}</p>
<button v-on:click="updateMessage">Update Message</button>
</div>
new Vue({
el: '#app',
data: {
message: 'hello world'
},
filters: {
capitalize: function(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
},
methods: {
updateMessage: function() {
this.message = 'new message';
}
}
})