过滤器封装 filters

过滤器封装

过滤器文件 filters

文件路径：src / filters / order.js

export default {
  setOrderStatus (status) {
    switch (status) {
      case 1:
        return '待付款';
        break;
      case 2:
        return '待发货';
        break;
      case 3:
        return '待收货';
        break;
      case 4:
        return '待评价';
        break;
      default:
        return '未获取到状态';
        break;
    }
  },
  setStatusStyle (statusString) {
    switch (statusString) {
      case '待付款':
        return 'not-pay';
        break;
      case '待发货':
        return 'not-send';
        break;
      case '待收货':
        return 'not-receive';
        break;
      case '待评价':
        return 'not-comment';
        break;
      default:
        return '';
        break;
    }
  }
}

数据 data

文件路径：src / data / order.js

/*
status的状态含义和对应的样式：
  1.待付款  对应  not-pay
  2.代发货  对应  not-send
  3.待收货  对应  not-receive
  4.待评价  对应  not-comment
*/
export default [
  {
    orderId: 1,
    name: '商品1',
    price: 1000,
    status: 1
  },
  {
    orderId: 2,
    name: '商品2',
    price: 2000,
    status: 2
  },
  {
    orderId: 3,
    name: '商品3',
    price: 3000,
    status: 3
  },
  {
    orderId: 4,
    name: '商品4',
    price: 4000,
    status: 4
  }
];

页面 app.vue

<template>
  <div id="app">
    <table border="1">
      <tr 
      v-for="(item,index) of orderData"
      :key="index"
      >
        <td>{{item.orderId}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td
        :class="item.status | setOrderStatus | setStatusStyle"
        >{{item.status | setOrderStatus}}</td>
      </tr>
    </table>
  </div>
</template>

<script>

// 订单数据
import orderData from '@/data/order';

// 过滤器
import orderFilters from '@/filters/order';

export default {
  name: 'app',
  filters: orderFilters,  // 注册过滤器
  data () {
    return {
      orderData // 订单数据
    }
  }
}
</script>

<style>
table {
  width: 800px;
  margin: 50px auto;
  border-collapse: collapse;
  text-align: center;
}
/* 对应的样式 */
.not-pay {
  color: red;
}
.not-send {
  color: blue;
}
.not-receive {
  color: orange;
}
.not-comment {
  color: green;
}
</style>

效果图：