| 符号前面是过滤器的传参,后面是过滤器的返回值。
使用方式:
<!-- 在双花括号中 -->
<div>{{ message | formatDate }}</div>
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatDate"></div>
很多时候,后台返回给我的列表数据中,时间这一个字段是时间戳。我们要将时间戳转化为日期格式显示给用户,通过我们用普通的方式,循环这个数组,将每一项的时间戳转换为具体的日期格式,而vue提供的过滤器可以帮我们很好的解决这种问题。
首先定义过滤器有两种方式,第一种是全局过滤器,我们可以直接在vue对象上使用filter方法注册过滤器,这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用,接下来我们使用这两种方式注册过滤器函数。
全局过滤器:
import Vue from 'vue';
Vue.filter('formatTime', function (val) {
const date = new Date(val);
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
return `${hour} : ${minutes} : ${seconds}`;
});
局部组件过滤器:
export default {
/* 局部过滤器 */
filters: {
formatDate (val) {
const date = new Date(val);
const year = date.getFullYear();
const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
return `${year}-${month}-${day}`;
}
}
}
或者把 formatDate 方法写的工具栏中,直接引入使用。
import { formatDate } from '@/utils/utils';
export default {
filters: {
formatDate(time) {
return formatDate(time)
}
}
}
20210219 更新内容~~
对于枚举值,有时候我们需要将 value 对应的 label 显示处理,需要转换一下,就可以使用 filter 过滤器来实现。
import Vue from 'vue'
Vue.filter('enumeration', function (data, format) {
// 根据value ==> label
const filterValueData = format.filter(item => {
return item['value'] === data
})
if (filterValueData[0]) {
return filterValueData[0]['label']
} else {
return ''
}
})
如何使用呢?
// capacityPoolData.vehicleTypeData 为枚举源数据
// data.vehicleType 为枚举值
<span>{{ data.vehicleType | enumeration(capacityPoolData.vehicleTypeData) }}</span>