vue.js - 求教vue绑定class的简洁写法

问题描述

问 题

 <div class="status" :class="{cancel:item.canceled,wait:item.statusType=='3'||item.statusType=='4'||item.statusType=='5'||item.statusType=='6',success:item.statusType=='7'}"></div>

如图，在vue中根据状态绑定dom的class,其中多种状态对应为同一class，除了上面代码中的脑残写法外，有什么简洁点的吗？

解决方案

用 计算属性

添加点伪代码

 computed: {
        myClass:function () {
          return {
              wait:[3,4,5,6].indexOf(this.item.statusType)>-1,
              success:this.item.statusType===7,
              cancle:this.item.cancled

          }
        }
     }

这篇关于vue.js - 求教vue绑定class的简洁写法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！