Vue的过滤器

Vue的自定义过滤器就是通过对数据的过滤从而实现对数据优化，得到我们需要的数据内容

比如我们进行对时间的过滤，从格林威治时间转换为我们日常需要的2020-9-13日

<template>
  <div>
  <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>入职时间</th>
        </tr>
        <tr v-for='(item,index) in list' :key='index'>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.date}}</td>
        </tr>
    </table>

  </div>
</template>

<script>
  export default {
    data(){
      return {
          list:[
            {'name': '张三','age': 18,'sex': '男','date': new Date()},
            {'name': '李四','age': 19,'sex': '男','date': new Date()},
            {'name': '王五','age': 21,'sex': '男','date': new Date()},
            {'name': '赵六','age': 34,'sex': '男','date': new Date()},
          ]
      }
    },
  }
</script>

<style  scoped>
table,td{
    border: 1px solid #555;
    border-collaspe:collaspe;
    }
</style>

过滤之前的效果

<template>
  <div>
  <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>入职时间</th>
        </tr>
        <tr v-for='(item,index) in list' :key='index'>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.date | dataFormate}}</td>
        </tr>
    </table>

  </div>
</template>

<script>
  export default {
    data(){
      return {
          list:[
            {'name': '张三','age': 18,'sex': '男','date': new Date()},
            {'name': '李四','age': 19,'sex': '男','date': new Date()},
            {'name': '王五','age': 21,'sex': '男','date': new Date()},
            {'name': '赵六','age': 34,'sex': '男','date': new Date()},
          ]
      }
    },
    filters:{
      dataFormate(val){
        console.log(val);
        let year=val.getFullYear();
        let month=val.getMonth()+1;
        let day=val.getDay();
        return `${year}-${month}-${day}`
      }
    }
  }
</script>

<style  scoped>
table,td{
    border: 1px solid #555;
    border-collaspe:collaspe;
    }
</style>

 

filters就是vue的过滤器清单列表，和components和computed类似，也是清单之一

dateFormate是自定义的过滤器名称，名称建议起有意义的，比如我们 dateFormate就是用来过滤时间

dateFormate(val)中的val是过滤参数，内部函数通过对数据的过滤然后return进行返回

过滤之后

 

 

filters和我们之前学习的computed类型，不同的是computed是对数据的计算，而filter是对数据的过滤

我们模拟computed的类似的使用场景，通常都是对数据进行计算

 computed:{
      jox(){
        return this.a%2==0?"奇数":"偶数"
        
      }
    },