vue 过滤器 filters 的使用

vue 过滤器 filters 的使用

代码：

<template>
  <div>
    <table border="1" style="width: 300px">
      <tr>
        <th>id</th>
        <th>商品名称</th>
        <th>商品状态</th>
      </tr>
      <tr v-for="(item, index) of list" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <!--filters过滤器使用-->
        <td :class="item.status | orderStatusClass">{{item.status | orderStatus}}</td> 
      </tr>
    </table>
  </div>
</template>

<script>
const orderStatus = (val)=>{
  switch (val){
    case 0:
      return '待支付';
    case 1:
      return '代发货';
    case 2:
      return '待收货';
    case 3:
      return '待评论';
  }
}
const orderStatusClass = (val)=>{
  switch (val){
    case 0:
      return 'not-pay';
    case 1:
      return 'not-send';
    case 2:
      return 'not-receipt';
    case 3:
      return 'not-comment';
  }
}
export default {
  name: "index",
  filters: { // filters过滤器
    orderStatus,
    orderStatusClass,
  },
  data() {
    return {
      list:[
        {id:1,name:'商品1',status: 0},
        {id:2,name:'商品2',status: 1},
        {id:3,name:'商品3',status: 2},
        {id:4,name:'商品4',status: 3},
        {id:5,name:'商品5',status: 0},
        {id:6,name:'商品6',status: 1},
      ]
    };
  },
};
</script>

<style scoped>
  .not-pay{
    color: red;
  }
  .not-send{
    color: olive;
  }
  .not-receipt{
    color: blue;
  }
  .not-comment{
    color: black;
  }
</style>

效果显示：