Vue 中的 filter 是一種管道操作，它能夠處理文本輸出。filter 可以接收一個(gè)值，進(jìn)行一些處理并返回一個(gè)新的值。在 Vue 中定義的 filter 可以用在{{}}語法，和指令（比如 v-bind）中。下面是基本的 filter 例子：

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

上述例子中，對(duì) capitalize 函數(shù)進(jìn)行了定義，并注冊(cè)成了全局的 filter。這個(gè) filter 接收一個(gè)字符串值，然后將其首字母變成大寫形式再返回。接下來在 Vue 模板中使用 capitalize filter：

{{ 'hello world' | capitalize }}

上述例子中的（管道）符號(hào)將字符串 'hello world' 傳遞給 capitalize 函數(shù)，并在頁面中渲染了一個(gè)首字母大寫的字符串。

filter 是可以串聯(lián)使用的。例如：

Vue.filter('truncate', function(value, limit) {
if (!value) return ''
value = value.toString()
return value.slice(0, limit) + '...'
})
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}){{ 'hello world' | capitalize | truncate(5) }}

上面的例子中使用了兩個(gè) filter，首先將字符串從 'hello world' 轉(zhuǎn)變成 'Hello world'（capitalize），然后將其截取前 5 個(gè)字符，并加上省略號(hào)（truncate）。最后頁面中渲染出的結(jié)果是：“Hello...”。

總的來說，filter 是 Vue 中非常強(qiáng)大的一種指令，它使得前端開發(fā)者能夠?qū)?fù)雜的數(shù)據(jù)操作在頁面上表現(xiàn)的簡單，易懂。