vue中对后台返回字段判断是否写入模板中

Question

有些页面中，状态非常多，根据返回的字段进行显示?

<div class="div" v-if="data.isOut==='1'"></div>

这是我一般的写法，但是状态多的话，这样写就会造成阅读困难，不够透彻
还有一种是写到方法中，大家一般都是以哪种居多？

Answer 1

//  如果是data里面已有的属性  那么直接用computed
//  如果是根据后台返回的数据
<div class="div" v-if="isShow(data.isOut)"></div>
methods:{
    isShow(val){
        //具体逻辑  
        // return  true or  false
    }
}

Answer 2

你这个问题确实在项目中经常遇到，我一般就是用v-if去判断，如果说写成方法，我觉得阅读性不见得就好到哪里去，这个需要对这块业务比较熟悉的话应该就比较好理解，实在不行你就在这里加注释，举个例子。

// isStatus 0 商品未上架 1 商品销售中 2 商品已下架
<div v-if="item.isStatus === 0">未上架</div>
<div v-if="item.isStatus === 1">销售中</div>
<div v-if="item.isStatus === 2">已下架</div>

Answer 3

用computed 计算属性

Answer 4

如果只是文字的不同，可以用数组或者对象把状态写出来

<div class="status">statusList[data.status]</div>
//状态从0开始，可以用数组
statusList:['未上架','销售中','已下架',...]
//状态任意值，都可以用对象
statusList:{
    0:'未上架',
    1:'销售中',
    2:'已下架',
    ...
}