在 Vue.js 中，filter 是一種用于在模板中對數據進行格式化的功能。它可以用來對數據進行處理、過濾或格式化，然后在模板中直接使用。

filter 是一種全局的 Vue 實例方法，可以在任何組件的模板中使用。

1.定義全局過濾器： 在 Vue 實例創建之前，可以通過 Vue.filter 方法定義。

// 定義全局過濾器
Vue.filter('capitalize', function(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);
});

在模板中使用過濾器：在模板中使用過濾器時，通過 | 符號將過濾器名稱添加到表達式中。

<!-- 在模板中使用過濾器 -->
<div>{{ message | capitalize }}</div>

2.過濾器攜帶參數

// 定義帶參數的過濾器
Vue.filter('truncate', function(value, length) {if (!value) return '';value = value.toString();return value.length > length ? value.slice(0, length) + '...' : value;
});

在模板中使用帶參數的過濾器：

<!-- 在模板中使用帶參數的過濾器 -->
<div>{{ longText | truncate(20) }}</div>

3.定義局部過濾器：

 data: {message: 'hello'},filters: {capitalize: function(value) {if (!value) return '';value = value.toString();return value.charAt(0).toUpperCase() + value.slice(1);}}

在模板中使用局部過濾器：

<!-- 在模板中使用局部過濾器 -->
<div>{{ message | capitalize }}</div>

4.過濾器鏈：(使用多個過濾器)

可以在模板中使用多個過濾器，它們會按順序執行

<!-- 過濾器鏈 -->
<div>{{ message | capitalize | truncate(10) }}</div>

5.總結

• 過濾器可以在模板中對數據進行格式化、處理或過濾。
• 可以定義全局過濾器和局部過濾器，全局過濾器適用于整個應用，局部過濾器適用于單個組件。
• 過濾器可以帶參數，也可以在模板中進行鏈式調用。