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