vue filter 实现
Vue 过滤器实现方法
Vue 过滤器（Filters）用于文本格式化，可以在模板中直接使用。以下是实现 Vue 过滤器的几种方式。
全局过滤器
全局过滤器通过 Vue.filter() 方法注册，可以在任何组件中使用。
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})在模板中使用：
<p>{{ message | capitalize }}</p>局部过滤器
局部过滤器在组件选项中定义，仅在该组件内可用。
export default {
filters: {
uppercase(value) {
if (!value) return ''
return value.toString().toUpperCase()
}
}
}在模板中使用：
<p>{{ text | uppercase }}</p>链式调用
多个过滤器可以链式调用，按顺序处理数据。
<p>{{ message | capitalize | reverse }}</p>对应的过滤器定义：
Vue.filter('reverse', function(value) {
if (!value) return ''
return value.toString().split('').reverse().join('')
})过滤器参数
过滤器可以接收额外参数。
Vue.filter('truncate', function(value, length) {
if (!value) return ''
value = value.toString()
return value.length > length ? value.substring(0, length) + '...' : value
})在模板中使用：
<p>{{ longText | truncate(10) }}</p>注意事项
- Vue 3 已移除过滤器功能，推荐使用计算属性或方法替代。
- 过滤器仅适用于插值表达式和
v-bind表达式。 - 确保过滤器函数是纯函数，避免副作用。
