vue自定义过滤器filters是通过对数据的过滤从而实现对数据的优化,得到我们需要的数据内容
例:对时间的过滤,从格林威治时间转换到日常时间2020-12-26
<template>
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>时间</th>
</tr>
<tr v-for="(item,index) in arr" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.date | datefilter}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data(){
return{
arr :[
{name:"张三",age:18,sex:"男",date:new Date()},
{name:"李四",age:28,sex:"男",date:new Date()},
{name:"王五",age:19,sex:"女",date:new Date()},
{name:"赵六",age:22,sex:"男",date:new Date()}
]
}
},
filters:{
datefilter(val){
let year = val.getFullYear();
let month = val.getMonth() + 1;
let day = val.getDate()
return `${year}-${month}-${day}`
}
}
}
</script>
filters 就是vue的过滤清单列表,和conponents、computed类似 也是清单之一
datefilter:自定义过滤器名称,(val)是过滤参数,内部函数通过对数据的过滤然后 return 返回
用法:对需要过滤的数据 通过 | 进行过滤, | 后面是自定义的过滤函数名称