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>

效果显示：