Vue3不支持Filters過濾器的問題
更新時間：2020年09月24日 10:18:53 作者：前端精髓
這篇文章主要介紹了Vue3不支持Filters過濾器的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
filters過濾器已從Vue 3.0中刪除，不再支持。
2.x 語法
在2.x中，開發(fā)人員可以使用過濾器來處理常見的文本格式。
<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>
雖然這看起來很方便，但它需要一個自定義語法，打破大括號內(nèi)表達(dá)式“只是JavaScript”的原則，這既增加了學(xué)習(xí)成本，也增加實現(xiàn)邏輯的成本。
3.x 更新
在3.x中，過濾器被刪除，不再受支持。相反，我們建議用方法調(diào)用或計算屬性替換它們。
下面的例子是一個實現(xiàn)類似功能的。
<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>
官方建議用計算屬性或方法代替過濾器，而不是使用過濾器。
到此這篇關(guān)于Vue3不支持Filters過濾器的問題的文章就介紹到這了,更多相關(guān)Vue3 Filters過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中使用element-ui進(jìn)行表單驗證的實例代碼
這篇文章主要介紹了vue中使用element-ui進(jìn)行表單驗證的實例代碼，本文給大家分享實現(xiàn)思路，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
在頁面加載數(shù)據(jù)之前,有一段空白時間,要么用loading加載,要么就用骨架屏，本文主要介紹了vue項目中使用骨架屏的方法，感興趣的可以了解一下2021-05-05
sass或者less都提供變量設(shè)置，在需求切換主題的項目中使用less或者sass變量，這篇文章主要介紹了vue引入sass全局變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章給大家介紹了vue數(shù)據(jù)傳遞的方法，包括，父組件向子組件傳值 ，子組件向父組件傳值 ，路由傳值等多種方法，需要的朋友參考下2018-04-04
在開發(fā)Web應(yīng)用程序時，常常需要進(jìn)行登錄驗證和權(quán)限管理，本文主要介紹了vue登錄路由權(quán)限管理的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
本文通過實例代碼給大家介紹了vue2.0實現(xiàn)前端星星評分功能組件，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-02-02
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
本文主要介紹了vue動態(tài)修改頁面title的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要為大家介紹了VueUse功能精簡你的dependencies實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文主要介紹了el-form-renderer使用教程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05