1. Vue2.js 过滤器简介
Vue.js 的过滤器允许你在模板中轻松地实现数据格式化。它是一种功能简单的数据转换函数,可以帮助开发者在展示数据时进行格式调整,而不改动底层数据。
2. 如何在 Vue 2 中创建过滤器
在Vue2中创建全局过滤器的方法如下:
Vue.filter('formatDate', function (value) {
if (!value) return ''
return new Date(value).toLocaleDateString()
})
创建局部过滤器的方法如下:
new Vue({
el: '#app',
data: {
date: '2022-01-01'
},
filters: {
formatDate: function (value) {
if (!value) return ''
return new Date(value).toLocaleDateString()
}
}
})
3. 在模板中使用过滤器
过滤器可以在两种地方使用:
- 插值表达式:
{{ value | filter }}
v-bind
表达式:v-bind:attribute="value | filter"
4. 在 Vue 3 中替代过滤器的方式
修改时间格式案例:
在 Vue3
中取消了 过滤器的概念,其中:
- 局部过滤器被完全删除
- 全局过滤器虽然被移除,但是可以使用 全局属性 进行替代
那么在列表中的时间处理部分,在 vue2
时代通常我们都是通过 全局过滤器 来进行实现的,所以在 vue3
中我们就顺理成章的通过 全局属性 替代实现
-
时间处理部分我们通过 Day.js 进行处理
-
下载 Day.js
npm i dayjs@1.10.6
-
创建
src/filter
文件夹,用于定义 全局属性import dayjs from 'dayjs' const dateFilter = (val, format = 'YYYY-MM-DD') => { if (!isNaN(val)) { val = parseInt(val) } return dayjs(val).format(format) } export default app => { app.config.globalProperties.$filters = { dateFilter } }
-
在
main.js
中导入// filter import installFilter from '@/filters' installFilter(app)
-
在
user-manage
中使用全局属性处理时间解析<el-table-column :label="$t('msg.excel.openTime')"> <template #default="{ row }"> {{ $filters.dateFilter(row.openTime) }} </template> </el-table-column>