Vue的過濾器(filters)函數(shù)用法示例
在 Vue 中，過濾器（filters）是一種特殊的函數(shù)，主要用于對文本數(shù)據(jù)進行格式化處理，比如轉(zhuǎn)換大小寫、日期格式化、貨幣格式化等。
1. 局部過濾器
你可以在組件內(nèi)部定義過濾器，這樣它就只在當前組件中有效。
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 實例之前定義全局過濾器。
import Vue from 'vue';
// 定義全局過濾器
Vue.filter('uppercase', function(value) {
if (!value) return '';
return value.toString().toUpperCase();
});
// 創(chuàng)建 Vue 實例
new Vue({
// ...
});在任意組件的模板中使用全局過濾器：
<template>
<div>
<!-- 輸出：HELLO WORLD -->
<p>{{ message | uppercase }}</p>
</div>
</template>3. 過濾器串聯(lián)
Vue 過濾器支持串聯(lián)使用，也就是一個值可以依次通過多個過濾器進行處理。
過濾器串聯(lián)的順序是從左到右依次執(zhí)行的，因此寫入模板的先后順序會直接影響最終結(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ù)，從而實現(xiàn)更靈活的格式化。
import dayjs from 'dayjs';
……
filters: {
formatDate(value, format = 'YYYY-MM-DD') {
// 這里可以使用日期庫如 day.js 進行格式化
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 里，過濾器已被移除，官方推薦使用計算屬性（computed）或者方法（methods）來替代過濾器的功能。
export default {
data() {
return {
price: 99.9
}
},
computed: {
formattedPrice() {
return '￥' + this.price.toFixed(2);
}
}
}在模板中使用計算屬性替代過濾器：
<template>
<div>
<!-- 輸出：￥99.90 -->
<p>{{ formattedPrice }}</p>
</div>
</template>Vue 3 移除過濾器（filters）主要基于以下幾個原因：
1） 語法一致性與冗余性
- 過濾器本質(zhì)上是一種特殊的語法糖，其功能可以被計算屬性（computed）或方法（methods）完全替代。
- 移除過濾器減少了學習成本和語法復雜度，保持了 "一個功能只對應(yīng)一種實現(xiàn)方式" 的設(shè)計原則。
2）組合式 API 的興起
- Vue 3 主推的組合式 API（Composition API）更強調(diào)邏輯復用和代碼組織，過濾器在這種范式下顯得格格不入。
- 過濾器只能在模板中使用，而計算屬性和方法可以在 setup () 函數(shù)中定義，更好地與組合式 API 集成。
3）類型推導與 IDE 支持
- 過濾器的類型推導較為困難，尤其是在 TypeScript 環(huán)境下。
- 計算屬性和方法作為普通 JavaScript 函數(shù)，更容易被類型系統(tǒng)和 IDE 正確識別。
4）性能優(yōu)化
- 過濾器的實現(xiàn)需要額外的運行時開銷，移除后可以簡化編譯過程和渲染邏輯。
總結(jié)
到此這篇關(guān)于Vue的過濾器(filters)函數(shù)用法的文章就介紹到這了,更多相關(guān)Vue 過濾器filters函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli3項目配置eslint代碼規(guī)范的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli3項目配置eslint代碼規(guī)范的完整步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要介紹了vue實現(xiàn)三級頁面跳轉(zhuǎn)功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue實現(xiàn)web滾動條分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
Vue3?watchEffect的使用教程和相關(guān)概念
Vue?3?引入了?Composition?API,其中?watchEffect?是一個非常強大的工具,用于響應(yīng)式地追蹤依賴項的變化,本文將詳細介紹?watchEffect?的使用方法和相關(guān)概念,文中有詳細的代碼供大家參考,需要的朋友可以參考下2024-08-08
vue2如何使用vue-i18n搭建多語言切換環(huán)境
這篇文章主要介紹了vue2-使用vue-i18n搭建多語言切換環(huán)境的相關(guān)知識,在data(){}中獲取的變量存在更新this.$i18n.locale的值時無法自動切換的問題,需要刷新頁面才能切換語言,感興趣的朋友一起看看吧2023-12-12
Vue3新特性Suspense和Teleport應(yīng)用場景分析
本文介紹了Vue2和Vue3中的Suspense用于處理異步請求的加載提示,以及如何在組件間實現(xiàn)動態(tài)加載,同時,Teleport技術(shù)展示了如何在DOM中靈活地控制組件的渲染位置,解決布局問題,感興趣的朋友跟隨小編一起看看吧2024-07-07
本文主要介紹了vue中三種不同插槽使用小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了vue實現(xiàn)標簽云效果的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
使用Vue3+ts?開發(fā)ProTable源碼教程示例
這篇文章主要為大家介紹了使用Vue3+ts?開發(fā)ProTable源碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在本篇文章中小編給大家分享了vue如何實現(xiàn)點擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學習下。2019-02-02