關(guān)于Vue中過(guò)濾器的必懂小知識(shí)
前言
大家好,今天來(lái)分享下Vue中的過(guò)濾器小知識(shí)
什么是過(guò)濾器
Vue.js 允許你自定義過(guò)濾器,可被用于一些常見的文本格式化。過(guò)濾器可以用在兩個(gè)地方:雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。
如何使用過(guò)濾器
全局過(guò)濾器
- 本案例是過(guò)濾價(jià)格中的¥和元
- 示例 ¥1999.00元
- 定義一個(gè)capitalize方法,傳入value值
- 如果value為空返回空字符串
- 否則就疊加字符串"¥" "元" ,這里的toFixed(2)四舍五入為指定小數(shù)位數(shù)
使用方法
//main.js Vue.filter("capitalize", function (value) { if (!value) return ""; return "¥" + value.toFixed(2) + "元"; });
在雙花括號(hào)中使用
<!-- home.vue --> <h1>Vue過(guò)濾器</h1> <p>{{ price | capitalize }}</p> {{ 20.6664376486 | capitalize }}
在 v-bind 中使用
<h1>Vue過(guò)濾器</h1> <p :id="122 | capitalize"></p>
局部過(guò)濾器
這里注意下 當(dāng)全局過(guò)濾器和局部過(guò)濾器重名時(shí),會(huì)采用局部過(guò)濾器。
局部過(guò)濾器可以在一個(gè)組件的選項(xiàng)中定義本地的過(guò)濾器:
export default { name: 'index', data() { return { price: 1999 } }, filters: { capitalize: function (value) { if (!value) return '' return '¥' + value.toFixed(2) + '元' } } }
過(guò)濾器可以串聯(lián)
在這個(gè)例子中,filterA 被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù),表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù) filterB,將 filterA 的結(jié)果傳遞到 filterB 中。
{{ message | filterA | filterB }}
注意:
1、 當(dāng)有局部和全局兩個(gè)名稱相同的過(guò)濾器時(shí)候,會(huì)以就近原則進(jìn)行調(diào)用,即:局部過(guò)濾器優(yōu)先于全局過(guò)濾器被調(diào)用!
2、 一個(gè)表達(dá)式可以使用多個(gè)過(guò)濾器。過(guò)濾器之間需要用管道符“|”隔開。其執(zhí)行順序從左往右
總結(jié)
到此這篇關(guān)于Vue中過(guò)濾器必懂小知識(shí)的文章就介紹到這了,更多相關(guān)Vue過(guò)濾器小知識(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題
這篇文章主要介紹了vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue3+vite中使用import.meta.glob的操作代碼
在vue2的時(shí)候,我們一般引入多個(gè)js或者其他文件,一般使用? require.context 來(lái)引入多個(gè)不同的文件,但是vite中是不支持 require的,他推出了一個(gè)功能用import.meta.glob來(lái)引入多個(gè),單個(gè)的文件,下面通過(guò)本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11vue實(shí)現(xiàn)驗(yàn)證碼按鈕倒計(jì)時(shí)功能
最近項(xiàng)目結(jié)束,空閑時(shí)間比較多,今天小編抽時(shí)間給大家使用vue寫一個(gè)小例子,就決定做驗(yàn)證碼倒計(jì)時(shí)功能,具體實(shí)例代碼大家參考下本文2018-04-04vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問(wèn)題
這篇文章主要介紹了vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue3中實(shí)現(xiàn)音頻播放器APlayer的方法
這篇文章主要介紹了vue3中實(shí)現(xiàn)音頻播放器APlayer的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08vue之?dāng)?shù)據(jù)交互實(shí)例代碼
本篇文章主要介紹了vue之?dāng)?shù)據(jù)交互實(shí)例代碼,vue中也存在像ajax和jsonp的數(shù)據(jù)交互,實(shí)現(xiàn)向服務(wù)器獲取數(shù)據(jù),有興趣的可以了解一下2017-06-06