vue 3 中使用过滤器可以对数据进行格式化、转换或操作,在模板中更方便地显示。方式包括全局过滤器、局部过滤器和第三方库。可以使用参数和链式调用,自定义参数。vue 3 还提供几个内置过滤器,如 json、lowercase、uppercase、capitalize 和 trim。
Vue 3 中使用过滤器
在 Vue 3 中使用过滤器,可以对数据进行格式化、转换或操作,从而在模板中以更方便和可读的方式显示。
用法:
在 Vue 3 中使用过滤器非常简单:
立即学习“前端免费学习笔记(深入)”;
{{ value | filterName }}
其中:
- value 要过滤的数据
- filterName 过滤器的名称
创建过滤器:
可以通过多种方式创建过滤器:
- 全局过滤器:在 main.js 中使用 app.config.globalProperties 注册全局过滤器:
import { app } from 'vue'
app.config.globalProperties.$myFilter = (value) => { /* filter implementation */ }
- 局部过滤器:在组件中使用 filters 选项注册局部过滤器:
export default {
filters: {
myFilter(value) { /* filter implementation */ }
}
}
- 第三方库:使用第三方库(如 vue-filters)注册过滤器,该库提供了预定义的过滤器集合。
示例:
以下是一个将数字转换为货币格式的过滤器示例:
export default {
filters: {
currency(value) {
return `$${value.toFixed(2)}`
}
}
}
然后,可以在模板中使用过滤器:
<p>{{ price | currency }}</p>
参数和链式调用:
过滤器可以接受参数,并可以链式调用:
{{ value | filter1(arg1, arg2) | filter2 }}
自定义参数:
还可以使用 v-bind 自定义过滤器参数:
<p>{{ price | currency(:digits) }}</p>
其中 :digits 是一个自定义参数。
内置过滤器:
Vue 3 提供了几个内置过滤器,包括:
- json:将对象或数组转换为 JSON 字符串
- lowercase:将字符串转换为小写
- uppercase:将字符串转换为大写
- capitalize:将字符串的首字母大写
- trim:去除字符串两端的空格