技術標籤：VUEvue

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

用法：對需要過濾的資料 通過 | 進行過濾， | 後面是自定義的過濾函式名稱