Vue.js 的过滤器(Filters)是 Vue.js 1.x 版本中的一个功能,它允许你定义一些可复用的文本格式化函数,可以在模板中通过管道符 | 使用。然而,在 Vue 2.x 及更高版本中,官方文档已明确说明,过滤器在 Vue 3.x 中已被移除,并建议改用计算属性或方法。
不过,为了回答你的问题,我仍然会解释 Vue 1.x 中的过滤器是如何工作的。
定义过滤器
在 Vue 1.x 中,你可以通过 Vue.filter() 方法来全局定义过滤器,或者在 Vue 实例的选项中定义局部过滤器。
javascript
// 全局定义
Vue.filter('myFilter', function (value) {
// 这里的 "value" 将是你要过滤的原始值
// 在这里对 value 进行处理,然后返回处理后的值
if (!value) return ''
value = value.toString()
return value.toUpperCase()
})
// 在 Vue 实例中定义局部过滤器
new Vue({
el: '#app',
data: {
message: 'hello'
},
filters: {
myLocalFilter: function (value) {
// 这里的 "value" 同样是你要过滤的原始值
// ...
return value.slice(0, 4)
}
}
})
使用过滤器
在模板中,你可以通过管道符 | 来使用过滤器。
html
<!-- 使用全局过滤器 -->
<p>{{ message | myFilter }}</p>
<!-- 使用局部过滤器 -->
<p>{{ message | myLocalFilter }}</p>
注意
过滤器函数总是接收表达式的值 (之前的值) 作为第一个参数。
过滤器可以串联使用,即一个过滤器的输出可以作为另一个过滤器的输入。
过滤器不应该用于修改原始数据,它们应该被用于纯文本转换。
由于 Vue 3.x 中已移除了过滤器功能,如果你正在使用 Vue 3.x 或更高版本,并希望实现类似的功能,可以考虑使用计算属性(computed properties)或方法(methods)。