当前位置：首页 > news >正文

vue2中的过滤器filter

news 2025/8/2 15:56:40

该功能在vue3中已废弃，vue3推荐使用方法或计算属性代替。所以本文主要基于vue2讲解过滤器的常见使用，以及过滤器filter和计算属性computed、方法method的区别。

vue过滤器是什么？

在vue2中，过滤器filter常用于对模板中的数据进行格式化处理。它不改变原始数据，只在渲染时对输出结果进行转换，非常适合处理日期格式化、金额格式化、文本处理等常见需求。

如何使用过滤器filter

使用语法：{{ 数据 | 过滤器名称 }}，管道符|表示将左侧数据传入右侧过滤器处理。
filter可以挂载在全局使用，也可以在组件内使用。

全局过滤器

挂载在vue中，全局生效，直接在任意组件使用

// main.js
import Vue from 'vue';// 注册全局过滤器：格式化金额
Vue.filter('formatMoney', (value) => {if (!value) return '¥0.00';// 保留两位小数并添加千分位return '¥' + Number(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
});new Vue({render: h => h(App)
}).$mount('#app');-------------------------------任意组件内------------
<template><p>金额：{{ price | formatMoney }}</p>
</template><script>
export default {data() {return { price: 12345.67 };}
};
</script>

组件过滤器

<template><div><!-- 在双花括号中使用 --><p>原始时间：{{ timestamp }}</p><p>格式化后：{{ timestamp | formatDate }}</p><!-- 在v-bind中使用 --><div :title="message | capitalize">鼠标悬停查看</div></div>
</template><script>
export default {data() {return {timestamp: 1620000000000, // 时间戳message: "hello world"};},filters: {// 格式化日期formatDate(value) {if (!value) return "";const date = new Date(value);return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;},// 首字母大写capitalize(value) {if (!value) return "";return value.charAt(0).toUpperCase() + value.slice(1);}}
};
</script>

带参数的过滤器

过滤器可以带参数，但是默认第一个参数是管道符 | 左侧的数据，所以自带的参数实际都从参数2开始。

<template><p>{{ date | formatDate('yyyy-MM-dd HH:mm') }}</p>
</template><script>
export default {data() {return { date: new Date() };},filters: {formatDate(value, format) {if (!value) return "";// 简化版日期格式化（实际项目建议使用moment.js等库）const year = value.getFullYear();const month = (value.getMonth() + 1).toString().padStart(2, '0');const day = value.getDate().toString().padStart(2, '0');const hour = value.getHours().toString().padStart(2, '0');const minute = value.getMinutes().toString().padStart(2, '0');return format.replace('yyyy', year).replace('MM', month).replace('dd', day).replace('HH', hour).replace('mm', minute);}}
};
</script>

链式过滤器

第一个过滤器的结果作为第二个过滤器的参数，第二个过滤器的结果作为第三个过滤器的参数，以此类推，呈现链式结构。

<template><p>{{ text | trim | capitalize }}</p>
</template><script>
export default {data() {return { text: "  hello vue  " };},filters: {trim(value) {return value.trim(); // 去除首尾空格},capitalize(value) {return value.charAt(0).toUpperCase() + value.slice(1);}}
};
</script>
<!-- 输出结果：Hello vue -->

常见场景

1. 日期时间格式化

本示例实现了简单的日期时间格式化，但实际项目中的应用场景可能会更复杂，所以更推荐使用moment.js或day.js库哦~

想了解day.js库可以看博主另一篇点这里看

// 全局过滤器：基于day.js的日期格式化
import Vue from 'vue';
import dayjs from 'dayjs';Vue.filter('formatDate', (value, format = 'YYYY-MM-DD') => {return dayjs(value).format(format);
});

2. 文本处理

大小写转换
文本截断（超出长度显示省略号）
HTML 转义（防止 XSS 攻击）

filters: {// 文本截断truncate(value, length = 10) {if (!value) return "";return value.length > length ? value.slice(0, length) + '...' : value;},// HTML转义escapeHtml(value) {return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');}
}

3. 状态转换

将后端返回的状态码转换为可读性强的文本。

<template>//此处状态显示：  已发货<p>订单状态：{{ orderStatus | statusText }}</p>
</template><script>
export default {data() {return { orderStatus: 2 };},filters: {statusText(status) {const statusMap = {0: '待支付',1: '已支付',2: '已发货',3: '已完成',4: '已取消'};return statusMap[status] || '未知状态';}}
};
</script>

4. 数字格式化

金额单位转换（分→元）
百分比显示
数字补零

filters: {// 分转元并格式化centToYuan(cent) {return '¥' + (cent / 100).toFixed(2);},// 转换为百分比toPercentage(value) {return (value * 100).toFixed(1) + '%';}
}

过滤器 vs 计算属性 vs 方法

在看了以上内容后会发现，filter能实现的功能，computed和method基本都能做到（可能这就是vue3将其废弃的原因吧）

但是三者有什么区别呢？在各场景该如何选择？

特性	过滤器	计算属性	方法
用途	数据格式化	复杂数据处理 / 依赖缓存	通用逻辑处理
模板中使用	`{{ data \| filter }}`	`{{ computedProp }}`	`{{ method() }}`
缓存	无缓存	有缓存（依赖不变则复用）	无缓存（每次调用重新执行）
参数传递	支持（灵活）	不支持	支持
链式调用	支持（通过管道符）	需手动组合	需手动组合