vue过滤器实现
Vue 过滤器的实现方法
Vue 过滤器用于格式化文本，可以在模板中通过管道符 | 调用。以下是几种常见的实现方式：
全局过滤器
全局过滤器通过 Vue.filter 定义，可以在任何组件中使用。
// 注册全局过滤器
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
// 在模板中使用
{{ message | capitalize }}局部过滤器
局部过滤器在组件选项中定义，仅在该组件内可用。
export default {
filters: {
formatDate(value) {
return new Date(value).toLocaleDateString()
}
},
data() {
return { date: '2023-01-01' }
}
}
// 模板中使用
{{ date | formatDate }}过滤器链
多个过滤器可以串联使用，按顺序执行。
{{ message | capitalize | reverse }}带参数的过滤器
过滤器可以接收额外参数。
Vue.filter('truncate', function(value, length) {
if (!value) return ''
value = value.toString()
return value.length > length ? value.substring(0, length) + '...' : value
})
// 使用
{{ longText | truncate(10) }}注意事项
- Vue 3 已移除过滤器，推荐使用计算属性或方法替代。
- 过滤器应设计为纯函数，避免副作用。
- 复杂逻辑建议使用计算属性而非过滤器。
以上方法覆盖了 Vue 2 中过滤器的常见使用场景，开发者可根据需求选择全局或局部实现方式。
