javascript过滤器是什么_如何格式化模板中的数据？-js教程-PHP中文网

javascript过滤器是什么_如何格式化模板中的数据？

夢幻星辰

发布： 2025-12-18 21:33:07

原创

239人浏览过

JavaScript过滤器是模板中用于数据格式化而不改变原始数据的小函数，常见于Vue 2（支持内置/自定义，用|调用），Vue 3已移除，改用计算属性、方法或组合式API替代。

javascript过滤器是什么_如何格式化模板中的数据？

JavaScript过滤器是模板中用来对数据进行格式化处理的小函数，它不改变原始数据，只影响显示效果。常见于 Vue.js 等支持模板语法的框架中（Vue 2 支持内置和自定义过滤器，Vue 3 已移除，需用计算属性或方法替代）。

过滤器的基本写法（以 Vue 2 为例）

在模板中用管道符 | 调用，接在表达式后面：

上面会把 message 的首字母转大写再显示。

立即学习“Java免费学习笔记（深入）”；

定义方式有两种：

全局过滤器：用 Vue.filter('filterName', function(value) { ... })
局部过滤器：在组件选项中加 filters: { filterName(value) { ... } }

常用内置过滤器（Vue 2）

Vue 2 提供了几个简单实用的内置过滤器（注意：仅限 Vue 2，且不支持链式调用复杂逻辑）：

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包

525

查看详情

capitalize：首字母大写（如 "hello" → "Hello"）
uppercase：全部转大写
lowercase：全部转小写
currency：添加货币符号（需传参，如 {{ price | currency('$') }}）
pluralize：根据数字自动切换单复数（如 {{ count | pluralize('item') }}）

自定义过滤器处理常见格式化需求

比如日期、数字千分位、手机号掩码等，都可封装为过滤器：

日期格式化：date | formatDate('YYYY-MM-DD') → 返回格式化后字符串
手机号脱敏：phone | maskPhone → 显示为 138****1234
金额保留两位小数：amount | toFixed(2) → 自动补零，12 → "12.00"

关键点：过滤器函数第一个参数固定是表达式的值，后续参数来自模板中传入（如 | filterA('a', 'b')，则函数接收 value, arg1, arg2）。

Vue 3 中如何替代过滤器？

Vue 3 不再支持过滤器语法，推荐以下更清晰可控的方式：

用计算属性：适合依赖响应式数据的格式化，如 formattedTime: computed(() => formatISO(new Date()))
用普通方法：在 methods 中定义格式化函数，模板中调用 {{ formatDate(post.time) }}
用组合式 API + 工具函数：在 setup() 中引入并使用 useDateFormat() 等可复用逻辑