过滤器:
定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
语法:
1. 注册过滤器:Vue,filter(name,callback),或new Vue{filters:{}}
2.使用过滤器:{{xxx | 过滤器名}} 或v-bind:属性 = "xxx | 过滤器名"
备注:
1. 过滤器也可以接收额外参数,多个过滤器也可以串联
2. 并没有改变原有的数据,是产生新的对应的数据
//需要导入的依赖
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.3/dayjs.min.js"></script>
<body>
<div id="root">
<h1>现在的时间是:{{data | timeFormat}}</h1>
<h1>现在是{{data | timeFormat | splic}} 年</h1>
</div>
<script>
Vue.config.productionTip = false;
//这是全局配置过滤器
Vue.filter("splic", function (value) {
return value.slice(0, 4);
})
new Vue({
el: "#root",
data: {
time: 1658060536201
},
//这是局部配置
filters: {
timeFormat(value) {
//引入时间格式化器(dayjs)来格式化时间
return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
},
// splic(value) {
// return value.slice(0, 4);
// }
}
})
</script>
</body>