JavaScript过滤器是模板中用于数据格式化而不改变原始数据的小函数，常见于Vue 2（支持内置/自定义，用|调用），Vue 3已移除，改用计算属性、方法或组合式API替代。
JavaScript过滤器是模板中用来对数据进行格式化处理的小函数，它不改变原始数据，只影响显示效果。常见于 Vue.js 等支持模板语法的框架中（Vue 2 支持内置和自定义过滤器，Vue 3 已移除，需用计算属性或方法替代）。
过滤器的基本写法（以 Vue 2 为例）
在模板中用管道符 | 调用，接在表达式后面：
{{ message | capitalize }}
上面会把 message 的首字母转大写再显示。
立即学习“Java免费学习笔记（深入）”；
定义方式有两种：
全局过滤器：用 Vue.filter('filterName', function(value) { ... }) 局部过滤器：在组件选项中加 filters: { filterName(value) { ... } }
常用内置过滤器（Vue 2）
Vue 2 提供了几个简单实用的内置过滤器（注意：仅限 Vue 2，且不支持链式调用复杂逻辑）：
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() 等可复用逻辑
本质上，过滤器只是语法糖；现代写法更强调逻辑可追踪、易测试、易复用。
基本上就这些。过滤器本质是视图层的数据“化妆师”，用得好能让模板干净简洁；但别让它承担业务逻辑，也别在 Vue 3 里找它——换种方式，一样利索。
以上就是javascript过滤器是什么_如何格式化模板中的数据？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543613.html
微信扫一扫 
支付宝扫一扫 
