首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 过滤器filters函数

Vue的过滤器(filters)函数用法示例

2025-09-06 11:43:22 投稿：daisy

在Vue.js中,过滤器(Filters)用于文本格式化,这篇文章主要介绍了Vue的过滤器(filters)函数用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

在 Vue 中，过滤器（filters）是一种特殊的函数，主要用于对文本数据进行格式化处理，比如转换大小写、日期格式化、货币格式化等。

1. 局部过滤器

你可以在组件内部定义过滤器，这样它就只在当前组件中有效。

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. 全局过滤器

若要让过滤器在所有组件中都能使用，可将其定义为全局过滤器。通常在创建 Vue 实例之前定义全局过滤器。

import Vue from 'vue';

// 定义全局过滤器
Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toString().toUpperCase();
});

// 创建 Vue 实例
new Vue({
  // ...
});

在任意组件的模板中使用全局过滤器：

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

3. 过滤器串联

Vue 过滤器支持串联使用，也就是一个值可以依次通过多个过滤器进行处理。

过滤器串联的顺序是从左到右依次执行的，因此写入模板的先后顺序会直接影响最终结果。

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

在模板中串联使用过滤器：

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

4. 过滤器传参

过滤器可以接收额外的参数，从而实现更灵活的格式化。

import dayjs from 'dayjs';
……
filters: {
  formatDate(value, format = 'YYYY-MM-DD') {
    // 这里可以使用日期库如 day.js 进行格式化
    return dayjs(value).format(format)
  }
}

在模板中传递参数给过滤器：

<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） 语法一致性与冗余性

过滤器本质上是一种特殊的语法糖，其功能可以被计算属性（computed）或方法（methods）完全替代。

移除过滤器减少了学习成本和语法复杂度，保持了 "一个功能只对应一种实现方式" 的设计原则。

2）组合式 API 的兴起

Vue 3 主推的组合式 API（Composition API）更强调逻辑复用和代码组织，过滤器在这种范式下显得格格不入。
过滤器只能在模板中使用，而计算属性和方法可以在 setup () 函数中定义，更好地与组合式 API 集成。

3）类型推导与 IDE 支持

过滤器的类型推导较为困难，尤其是在 TypeScript 环境下。
计算属性和方法作为普通 JavaScript 函数，更容易被类型系统和 IDE 正确识别。

4）性能优化

过滤器的实现需要额外的运行时开销，移除后可以简化编译过程和渲染逻辑。

总结

到此这篇关于Vue的过滤器(filters)函数用法的文章就介绍到这了,更多相关Vue 过滤器filters函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！