异常教程

vue filter（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在 Vue 开发中，数据展示的灵活性是开发者关注的核心问题之一。例如，我们需要将日期显示为“YYYY-MM-DD”格式，或者将数字转换为带货币符号的字符串，甚至对文本进行截断以适配界面布局。这些需求看似简单，但若通过重复编写代码实现，不仅会增加冗余，还可能降低代码的可维护性。此时，Vue Filter（Vue 过滤器）便成为了一个高效且优雅的解决方案。

本文将从基础概念到实战案例，逐步讲解 Vue Filter 的核心原理、应用场景及实现技巧。无论你是编程初学者还是中级开发者，都能通过本文掌握如何用过滤器优化代码，并理解其在现代 Vue 开发中的定位与演变。

一、Vue Filter 的基础概念

1.1 什么是 Vue Filter？

Vue Filter 是一种用于格式化数据的特殊函数。它通过 | 符号附加在表达式末尾，对数据进行转换后返回结果。例如：

{{ message | uppercase }}

上述代码会将 message 的值通过 uppercase 过滤器转换为全大写后显示。

形象比喻：过滤器就像厨房里的调料，可以将原始食材（数据）“调味”成符合需求的最终形态。例如，盐和胡椒是基础调料（内置过滤器），而自制酱料（自定义过滤器）则能实现更个性化的加工。

1.2 过滤器的声明与使用

声明过滤器

过滤器可以通过全局注册或组件内注册两种方式定义：

// 全局注册（适用于所有组件）
Vue.filter('formatDate', function(value) {
  return moment(value).format('YYYY-MM-DD');
});

// 组件内注册（仅当前组件可用）
export default {
  filters: {
    uppercase(value) {
      return value.toUpperCase();
    }
  }
};

使用过滤器

在模板中通过 | 符号调用：

<template>
  <div>
    {{ user.name | uppercase }} <!-- 全大写 -->
    {{ user.birthday | formatDate }} <!-- 格式化日期 -->
  </div>
</template>

二、Vue Filter 的典型应用场景

2.1 场景 1：日期格式化

假设我们需要将 Date 对象转换为“YYYY-MM-DD”格式，可结合第三方库（如 moment.js）编写过滤器：

Vue.filter('date', function(value) {
  return moment(value).format('YYYY-MM-DD');
});

使用时直接调用：

{{ user.birthday | date }}

2.2 场景 2：数字货币符号处理

将数值转换为带货币符号的字符串：

Vue.filter('currency', function(value) {
  return `$${value.toFixed(2)}`;
});

模板中使用：

{{ price | currency }} <!-- 显示为 $199.99 -->

2.3 场景 3：字符串截断与省略号

对过长文本进行截断：

Vue.filter('truncate', function(value, length = 10) {
  return value.length > length ? `${value.slice(0, length)}...` : value;
});

模板中指定参数：

{{ article.content | truncate:20 }} <!-- 截取前20字符 -->

三、深入自定义过滤器的实现

3.1 过滤器的参数传递

过滤器支持传递多个参数。例如，修改上述 truncate 过滤器，允许用户自定义截断长度和省略符：

Vue.filter('truncate', function(value, length, suffix = '...') {
  return value.length > length ? value.slice(0, length) + suffix : value;
});

调用时：

{{ text | truncate:15:'→' }} <!-- 截取15字符后用→替代 -->

3.2 过滤器的链式调用

多个过滤器可以串联使用，按顺序执行：

{{ price | currency | truncate:5 }} 
<!-- 先格式化为$199.99，再截取前5字符 → $199 -->

3.3 过滤器的局限性

  • 性能问题：过滤器在每次渲染时都会重新执行，频繁使用可能影响性能。
  • 可维护性：复杂的逻辑应避免放在过滤器中，建议改用计算属性或方法。

四、Vue 3 中的过滤器与替代方案

4.1 Vue 3 的变化

Vue 3 官方移除了过滤器特性，转而推荐以下替代方案：

4.1.1 计算属性（Computed Properties）

// 组件内定义计算属性
computed: {
  formattedDate() {
    return moment(this.user.birthday).format('YYYY-MM-DD');
  }
}

模板中直接使用：

{{ formattedDate }}

4.1.2 方法（Methods）

// 定义方法
methods: {
  formatCurrency(value) {
    return `$${value.toFixed(2)}`;
  }
}

模板中调用：

{{ formatCurrency(price) }}

4.1.3 全局工具函数

将常用功能封装为独立函数，通过 import 引入：

// utils.js
export function truncate(value, length, suffix) {
  // 实现逻辑
}

// 组件中使用
import { truncate } from '@/utils';

// 在 methods 或 computed 中调用

五、实战案例：综合过滤器应用

5.1 需求：用户信息卡片

假设需要展示用户信息，要求：

  1. 姓名全大写；
  2. 日期格式化为“MM/DD/YYYY”；
  3. 简介截断为 20 字符；
  4. 性别显示为“Male”或“Female”。

5.1.1 Vue 2 实现

// 全局注册过滤器
Vue.filter('uppercase', value => value.toUpperCase());
Vue.filter('date', value => moment(value).format('MM/DD/YYYY'));
Vue.filter('truncate', (value, length) => value.slice(0, length) + '...');
Vue.filter('gender', value => value ? 'Male' : 'Female');

// 模板中使用
<template>
  <div>
    <p>姓名：{{ user.name | uppercase }}</p>
    <p>生日：{{ user.birthday | date }}</p>
    <p>简介：{{ user.intro | truncate:20 }}</p>
    <p>性别：{{ user.gender | gender }}</p>
  </div>
</template>

5.1.2 Vue 3 实现（使用计算属性）

// 组件内定义计算属性
computed: {
  formattedUser() {
    return {
      name: this.user.name.toUpperCase(),
      birthday: moment(this.user.birthday).format('MM/DD/YYYY'),
      intro: this.user.intro.slice(0, 20) + '...',
      gender: this.user.gender ? 'Male' : 'Female'
    };
  }
}

// 模板中使用
<template>
  <div>
    <p>姓名：{{ formattedUser.name }}</p>
    <p>生日：{{ formattedUser.birthday }}</p>
    <p>简介：{{ formattedUser.intro }}</p>
    <p>性别：{{ formattedUser.gender }}</p>
  </div>
</template>

六、总结与建议

通过本文，我们深入探讨了 Vue Filter 的核心功能、使用场景及进阶技巧，并对比了 Vue 2 与 Vue 3 的实现差异。以下是关键总结：

  • 基础场景适用：过滤器适合简单数据格式化，如字符串转换、日期格式化等。
  • 性能优先：复杂逻辑应改用计算属性或方法，避免因频繁触发过滤器影响性能。
  • Vue 3 兼容性：若使用 Vue 3，优先采用计算属性或工具函数替代过滤器。

实践建议：

  1. 将常用过滤器功能封装为工具函数库，提升代码复用性；
  2. 对于需要动态参数的场景，可结合 v-bind 传递参数（例如 :truncate-length="20"）；
  3. 学习 vue-i18n 等插件，实现更复杂的国际化数据处理。

掌握 Vue Filter 的核心思想后，你可以将其与计算属性、组件通信等技术结合，构建更灵活、可维护的 Vue 应用。

最新发布

查看更多文章