關(guān)于Vue中過濾器的必懂小知識(shí)
前言
大家好，今天來分享下Vue中的過濾器小知識(shí)
什么是過濾器
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。
如何使用過濾器
全局過濾器
- 本案例是過濾價(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過濾器</h1>
<p>{{ price | capitalize }}</p>
{{ 20.6664376486 | capitalize }}
在 v-bind 中使用
<h1>Vue過濾器</h1>
<p :id="122 | capitalize"></p>
局部過濾器
這里注意下 當(dāng)全局過濾器和局部過濾器重名時(shí)，會(huì)采用局部過濾器。
局部過濾器可以在一個(gè)組件的選項(xiàng)中定義本地的過濾器：
export default {
name: 'index',
data() {
return {
price: 1999
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
return '￥' + value.toFixed(2) + '元'
}
}
}
過濾器可以串聯(lián)
在這個(gè)例子中，filterA 被定義為接收單個(gè)參數(shù)的過濾器函數(shù)，表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 filterB 中。
{{ message | filterA | filterB }}
注意：
1、 當(dāng)有局部和全局兩個(gè)名稱相同的過濾器時(shí)候，會(huì)以就近原則進(jìn)行調(diào)用，即：局部過濾器優(yōu)先于全局過濾器被調(diào)用！
2、 一個(gè)表達(dá)式可以使用多個(gè)過濾器。過濾器之間需要用管道符“|”隔開。其執(zhí)行順序從左往右
總結(jié)
到此這篇關(guān)于Vue中過濾器必懂小知識(shí)的文章就介紹到這了,更多相關(guān)Vue過濾器小知識(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue項(xiàng)目和微信小程序中生成二維碼和條形碼是一個(gè)常見的需求,主要用于分享、產(chǎn)品識(shí)別等場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用Vue3生成二維碼和條形碼的相關(guān)資料,需要的朋友可以參考下2024-09-09
vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決
這篇文章主要介紹了vue:axios請(qǐng)求本地json路徑錯(cuò)誤問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式
這篇文章主要介紹了vue中axios利用blob實(shí)現(xiàn)文件瀏覽器下載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)航菜單和編輯文本功能的方法，文中示例代碼非常詳細(xì)，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要給大家介紹了關(guān)于Vue自定義加水波紋效果指令的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
詳解Vue3.0 + TypeScript + Vite初體驗(yàn)
這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼
這篇文章主要介紹了仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue中@keyup.enter失效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例
很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng)，即省市區(qū)三級(jí)聯(lián)動(dòng)，這篇文章主要介紹了Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例，感興趣的小伙伴們可以參考一下2018-06-06