v-for渲染出来的列表，要根据不同的状态改变样式，通过给标签添加lang属性完成

代码：

<template>
    <li class="coupon_item" 
            v-for="(item,index) in voucherList" 
            :key="index"
            :lang = "_type(item.mealType)">
             <span class="text" v-text="item.mealType + '券'">    
             </span>
    </li>
</template>

<script>
    methods:{

        _type( type ){
           //console.log(type)
            if( type === "晚餐" ){
                return 'W'
            }else if( type === "外卖" ){
                return 'O'
            }else if( type === "早餐" ){
                return 'Z'
            }else if( type === "午餐" ){
                return 'L'
            }
            
        }
    }
</script>

<style>
    .coupon_item{
            
            &:lang(W){
                background:#c69ace;
                .icon{
                    background:#ac5cbb;
                    .icon-zaocan1,.icon-waimai1,.icon-wucan{
                        display:none;
                    }
                }
                .item_layer{
                    border-top:1px dashed #ac5cbb;
                }
            }
            &:lang(O){
                background:#e38686;
                .icon{
                    background:#db4e4e;
                    .icon-zaocan1,.icon-wucan,.icon-wancan{
                        display:none;
                    }
                }
                .item_layer{
                    border-top:1px dashed #db4e4e;
                }
            }
            &:lang(Z){
                background:#fad373;
                .icon{
                    background:#eda802;
                    .iconfont{
                        font-size:14px;
                    }
                    .icon-waimai1,.icon-wucan,.icon-wancan{
                        display:none;
                    }
                }
                .item_layer{
                    border-top:1px dashed #eda802;
                }
            }
            &:lang(L){
                background:#84bce6;
                .icon{
                    background:#3f8fca;
                    .icon-waimai1,.icon-zaocan1,.icon-wancan{
                        display:none;
                    }
                }
                .item_layer{
                    border-top:1px dashed #3f8fca;
                }
            }
    }
</style>

 

<li class="coupon_item"

@click="coupon(item.couponNo,item.orderId)"

v-for="(item,index) in voucherList"

:key="index"

:lang = "_type(item.mealType)"

v-if="item.mealType === voucher_type">