Vue中的Filter是一種全局的函數，它可以在Vue模板中過濾數據并進行處理。

在實際應用中，經常需要對用戶輸入的數據進行過濾和處理。例如，在用戶提交表單之前需要對輸入的內容進行格式校驗，或者輸入框中需濾掉一些不符合規定的字符。這時，我們可以使用 Vue 的 Filter 功能，提高了我們 Web 開發的效率。

Vue.filter('upperCase', function (value) {
return value.toUpperCase()
})
new Vue({
el: '#app',
data: {
message: 'hello world'
}
})

上述代碼定義了一個Filter - upperCase，使用了JavaScript的String函數將輸入內容轉換為大寫，并將其綁定到 Vue 實例上。

接下來，在模板中應用這個 Filter：

{{ message | upperCase }}

這樣就能將綁定的數據 message 轉換為大寫，輸出 "HELLO WORLD"。

Filter 除了能夠對數據進行處理和過濾，還可以接收參數：

Vue.filter('truncate', function (value, length, suffix) {
if (value.length >length) {
value = value.substring(0, length)
value += suffix ? suffix : '...'
}
return value
})

上述代碼定義了一個名為 truncate 的 Filter，它可以截取字符串到指定長度，并在尾部添加自定義的結尾描述。下面是在模板中使用它的示例：

{{ message | truncate(10, '...more') }}

通過這樣的定義和使用，我們既可以方便快捷地在模板中處理數據，又可以將復雜的處理邏輯抽離到全局中，從而使我們的業務代碼更清晰、更可維護。