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í)成本，也增加實(shí)現(xiàn)邏輯的成本。
3.x 更新
在3.x中，過濾器被刪除，不再受支持。相反，我們建議用方法調(diào)用或計(jì)算屬性替換它們。
下面的例子是一個實(shí)現(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>
官方建議用計(jì)算屬性或方法代替過濾器，而不是使用過濾器。
到此這篇關(guān)于Vue3不支持Filters過濾器的問題的文章就介紹到這了,更多相關(guān)Vue3 Filters過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于Vue3使用JSX的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理，返回需要的結(jié)果。這篇文章主要給大家介紹vue 過濾器filter實(shí)例，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
vue3+ts+vite2項(xiàng)目實(shí)戰(zhàn)踩坑記錄
最近嘗試上手Vue3+TS+Vite,對比起Vue2有些不適應(yīng),但還是真香,下面這篇文章主要給大家介紹了關(guān)于vue3+ts+vite2項(xiàng)目的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue中el-tree?橫向滾動條的實(shí)現(xiàn)
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實(shí)現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點(diǎn)后兩位,并且不能輸入減號問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
壓縮Vue.js打包后的體積方法總結(jié)(Vue.js打包后體積過大問題)
大家都知道，Vuejs的 CLI工具 是基于 webpack 來實(shí)現(xiàn)的，所以在項(xiàng)目打包后，會生成的文件會很大。 主要原因是 webpack 將我們所有文件都打包成一個js文件，即使再小的項(xiàng)目，打包之后文件都會變得很大。 下面講講最近我遇到的相同問題。2020-02-02
Vue學(xué)習(xí)筆記之計(jì)算屬性與偵聽器用法
這篇文章主要介紹了Vue學(xué)習(xí)筆記之計(jì)算屬性與偵聽器用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js計(jì)算屬性與偵聽器基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
vue3?ref實(shí)現(xiàn)響應(yīng)式的方法
這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況：ref接收的是number這種原始類型、ref接收的是對象這種非原始類型,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在vue中使用公共過濾器filter的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
Vue.js通用應(yīng)用框架-Nuxt.js的上手教程
本篇文章主要介紹了Vue.js通用應(yīng)用框架-Nuxt.js的上手教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12