快捷導(dǎo)航

Vue的過(guò)濾器(filters)函數(shù)用法示例

更新時(shí)間：2025年09月06日 11:43:38 投稿：daisy

在Vue.js中,過(guò)濾器(Filters)用于文本格式化,這篇文章主要介紹了Vue的過(guò)濾器(filters)函數(shù)用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1. 局部過(guò)濾器

你可以在組件內(nèi)部定義過(guò)濾器，這樣它就只在當(dāng)前組件中有效。

export default {
  data() {
    return {
      price: 99.9
    }
  },
  // 定義局部過(guò)濾器
  filters: {
    currency(value) {
      if (typeof value !== 'number') {
        return value;
      }
      return '￥' + value.toFixed(2);
    }
  }
}

在模板中使用過(guò)濾器：

<template>
  <div>
    <!-- 輸出：￥99.90 -->
    <p>{{ price | currency }}</p>
  </div>
</template>

2. 全局過(guò)濾器

若要讓過(guò)濾器在所有組件中都能使用，可將其定義為全局過(guò)濾器。通常在創(chuàng)建 Vue 實(shí)例之前定義全局過(guò)濾器。

import Vue from 'vue';

// 定義全局過(guò)濾器
Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toString().toUpperCase();
});

// 創(chuàng)建 Vue 實(shí)例
new Vue({
  // ...
});

在任意組件的模板中使用全局過(guò)濾器：

<template>
  <div>
    <!-- 輸出：HELLO WORLD -->
    <p>{{ message | uppercase }}</p>
  </div>
</template>

3. 過(guò)濾器串聯(lián)

Vue 過(guò)濾器支持串聯(lián)使用，也就是一個(gè)值可以依次通過(guò)多個(gè)過(guò)濾器進(jìn)行處理。

過(guò)濾器串聯(lián)的順序是從左到右依次執(zhí)行的，因此寫(xiě)入模板的先后順序會(huì)直接影響最終結(jié)果。

filters: {
  currency(value) {
    return '￥' + value.toFixed(2);
  },
  discount(value, rate) {
    return value * (rate || 1);
  }
}

在模板中串聯(lián)使用過(guò)濾器：

<template>
  <div>
    <!-- 輸出：￥79.92 -->
    <p>{{ 99.9 | discount(0.8) | currency }}</p>
  </div>
</template>

4. 過(guò)濾器傳參

過(guò)濾器可以接收額外的參數(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ù)給過(guò)濾器：

<template>
  <div>
    <!-- 輸出：2023/10/15 -->
    <p>{{ date | formatDate('YYYY/MM/DD') }}</p>
  </div>
</template>

5. Vue 3 中的變化

在 Vue 3 里，過(guò)濾器已被移除，官方推薦使用計(jì)算屬性（computed）或者方法（methods）來(lái)替代過(guò)濾器的功能。

export default {
  data() {
    return {
      price: 99.9
    }
  },
  computed: {
    formattedPrice() {
      return '￥' + this.price.toFixed(2);
    }
  }
}

在模板中使用計(jì)算屬性替代過(guò)濾器：

<template>
  <div>
    <!-- 輸出：￥99.90 -->
    <p>{{ formattedPrice }}</p>
  </div>
</template>

Vue 3 移除過(guò)濾器（filters）主要基于以下幾個(gè)原因：

1） 語(yǔ)法一致性與冗余性

過(guò)濾器本質(zhì)上是一種特殊的語(yǔ)法糖，其功能可以被計(jì)算屬性（computed）或方法（methods）完全替代。

移除過(guò)濾器減少了學(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ù)用和代碼組織，過(guò)濾器在這種范式下顯得格格不入。
過(guò)濾器只能在模板中使用，而計(jì)算屬性和方法可以在 setup () 函數(shù)中定義，更好地與組合式 API 集成。

3）類型推導(dǎo)與 IDE 支持

過(guò)濾器的類型推導(dǎo)較為困難，尤其是在 TypeScript 環(huán)境下。
計(jì)算屬性和方法作為普通 JavaScript 函數(shù)，更容易被類型系統(tǒng)和 IDE 正確識(shí)別。

4）性能優(yōu)化

過(guò)濾器的實(shí)現(xiàn)需要額外的運(yùn)行時(shí)開(kāi)銷，移除后可以簡(jiǎn)化編譯過(guò)程和渲染邏輯。

總結(jié)

到此這篇關(guān)于Vue的過(guò)濾器(filters)函數(shù)用法的文章就介紹到這了,更多相關(guān)Vue 過(guò)濾器filters函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: