Vue-过滤器filters

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 返回

用法:对需要过滤的数据  通过  |   进行过滤, |  后面是自定义的过滤函数名称

Vue-过滤器filtersVue-过滤器filters

 

上一篇:Vue-cli项目中过滤器使用


下一篇:element ui table表头动态筛选条件