Vue3不再支持Filters過濾器

filters過濾器已從Vue 3.0中刪除，不再支持。

2.x 語法
在2.x中，開發人員可以使用過濾器來處理常見的文本格式。

<template>
<h1>Bank Account Balance</h1>
<p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
filters: {
currencyUSD(value) {
return '$' + value
}
}
}
</script>

　　

　　

雖然這看起來很方便，但它需要一個自定義語法，打破大括號內表達式“只是JavaScript”的原則，這既增加了學習成本，也增加實現邏輯的成本。

3.x 更新
在3.x中，過濾器被刪除，不再受支持。相反，我們建議用方法調用或計算屬性替換它們。

下面的例子是一個實現類似功能的。

<template>
<h1>Bank Account Balance</h1>
<p>{{ accountInUSD }}</p>
</template>

<script>
export default {
props: {
accountBalance: {
type: Number,
required: true
}
},
computed: {
accountInUSD() {
return '$' + this.accountBalance
}
}
}
</script>

　　

官方建議用計算屬性或方法代替過濾器，而不是使用過濾器。