vue过滤器的使用场景以及用法
定义:
过滤器是对 即将显示的数据做进一步的筛选处理,然后显示,过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据
## 过滤器的使用场景
时间戳过滤:
export default {
name: 'FilterDemo',
/* 局部过滤器 */
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}`;
console.log(val);
}
},
data () {
return {
}
}
}
用法:
<template>
<div>
<h2>vue过滤器:</h2>
<!-- 局部过滤器 -->
<p><b>{{ 1533527037000 | formatDate }}</b></p>
<!-- 全局过滤器 -->
<p><b>{{ 1533527037000 | formatTime }}</b></p>
</div>
</template>