Vue的過濾器(filters)函數(shù)用法示例
在 Vue 中，過濾器（filters）是一種特殊的函數(shù)，主要用于對(duì)文本數(shù)據(jù)進(jìn)行格式化處理，比如轉(zhuǎn)換大小寫、日期格式化、貨幣格式化等。
1. 局部過濾器
你可以在組件內(nèi)部定義過濾器，這樣它就只在當(dāng)前組件中有效。
export default {
data() {
return {
price: 99.9
}
},
// 定義局部過濾器
filters: {
currency(value) {
if (typeof value !== 'number') {
return value;
}
return '￥' + value.toFixed(2);
}
}
}在模板中使用過濾器：
<template>
<div>
<!-- 輸出：￥99.90 -->
<p>{{ price | currency }}</p>
</div>
</template>2. 全局過濾器
若要讓過濾器在所有組件中都能使用，可將其定義為全局過濾器。通常在創(chuàng)建 Vue 實(shí)例之前定義全局過濾器。
import Vue from 'vue';
// 定義全局過濾器
Vue.filter('uppercase', function(value) {
if (!value) return '';
return value.toString().toUpperCase();
});
// 創(chuàng)建 Vue 實(shí)例
new Vue({
// ...
});在任意組件的模板中使用全局過濾器：
<template>
<div>
<!-- 輸出：HELLO WORLD -->
<p>{{ message | uppercase }}</p>
</div>
</template>3. 過濾器串聯(lián)
Vue 過濾器支持串聯(lián)使用，也就是一個(gè)值可以依次通過多個(gè)過濾器進(jìn)行處理。
過濾器串聯(lián)的順序是從左到右依次執(zhí)行的，因此寫入模板的先后順序會(huì)直接影響最終結(jié)果。
filters: {
currency(value) {
return '￥' + value.toFixed(2);
},
discount(value, rate) {
return value * (rate || 1);
}
}在模板中串聯(lián)使用過濾器：
<template>
<div>
<!-- 輸出：￥79.92 -->
<p>{{ 99.9 | discount(0.8) | currency }}</p>
</div>
</template>4. 過濾器傳參
過濾器可以接收額外的參數(shù)，從而實(shí)現(xiàn)更靈活的格式化。
import dayjs from 'dayjs';
……
filters: {
formatDate(value, format = 'YYYY-MM-DD') {
// 這里可以使用日期庫(kù)如 day.js 進(jìn)行格式化
return dayjs(value).format(format)
}
}在模板中傳遞參數(shù)給過濾器：
<template>
<div>
<!-- 輸出：2023/10/15 -->
<p>{{ date | formatDate('YYYY/MM/DD') }}</p>
</div>
</template>5. Vue 3 中的變化
在 Vue 3 里，過濾器已被移除，官方推薦使用計(jì)算屬性（computed）或者方法（methods）來替代過濾器的功能。
export default {
data() {
return {
price: 99.9
}
},
computed: {
formattedPrice() {
return '￥' + this.price.toFixed(2);
}
}
}在模板中使用計(jì)算屬性替代過濾器：
<template>
<div>
<!-- 輸出：￥99.90 -->
<p>{{ formattedPrice }}</p>
</div>
</template>Vue 3 移除過濾器（filters）主要基于以下幾個(gè)原因：
1） 語(yǔ)法一致性與冗余性
- 過濾器本質(zhì)上是一種特殊的語(yǔ)法糖，其功能可以被計(jì)算屬性（computed）或方法（methods）完全替代。
- 移除過濾器減少了學(xué)習(xí)成本和語(yǔ)法復(fù)雜度，保持了 "一個(gè)功能只對(duì)應(yīng)一種實(shí)現(xiàn)方式" 的設(shè)計(jì)原則。
2）組合式 API 的興起
- Vue 3 主推的組合式 API（Composition API）更強(qiáng)調(diào)邏輯復(fù)用和代碼組織，過濾器在這種范式下顯得格格不入。
- 過濾器只能在模板中使用，而計(jì)算屬性和方法可以在 setup () 函數(shù)中定義，更好地與組合式 API 集成。
3）類型推導(dǎo)與 IDE 支持
- 過濾器的類型推導(dǎo)較為困難，尤其是在 TypeScript 環(huán)境下。
- 計(jì)算屬性和方法作為普通 JavaScript 函數(shù)，更容易被類型系統(tǒng)和 IDE 正確識(shí)別。
4）性能優(yōu)化
- 過濾器的實(shí)現(xiàn)需要額外的運(yùn)行時(shí)開銷，移除后可以簡(jiǎn)化編譯過程和渲染邏輯。
總結(jié)
到此這篇關(guān)于Vue的過濾器(filters)函數(shù)用法的文章就介紹到這了,更多相關(guān)Vue 過濾器filters函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解VUE 定義全局變量的幾種實(shí)現(xiàn)方式
本篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問題
這篇文章主要介紹了Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Win11&Win10配置vue開發(fā)環(huán)境詳細(xì)圖文教程
目前前端三大框架(vue、react、angular)中vue是前端工程師經(jīng)常使用的,在使用之前需要搭建vue開發(fā)環(huán)境,這篇文章主要給大家介紹了關(guān)于Win11&Win10配置vue開發(fā)環(huán)境的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Vue+Router+Element實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue-router中path的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
本文詳細(xì)解析了Vue中的v-model和:value兩種綁定方式的區(qū)別、使用場(chǎng)景以及最佳實(shí)踐,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,感興趣的朋友一起看看吧2026-01-01
本文主要介紹了Vue實(shí)現(xiàn)模糊查詢搜索功能的步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
這篇文章主要介紹了axios在Vue項(xiàng)目中用來向后臺(tái)發(fā)送請(qǐng)求（調(diào)接口API），獲取響應(yīng)信息的方法,axios 是一個(gè)輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請(qǐng)求，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了全局引入vant后使用Toast的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05