鍍金池/ 問答/HTML/ vue :class 三種狀態(tài)怎么寫？

vue :class 三種狀態(tài)怎么寫？

比如傳來的數(shù)據(jù)

data () {
  return {
    ...
    status:0
  }
}

status 有三種值 ： -1， 0， 1
模板中的class：

<span :class="怎么寫？">{{status}}</span>
if (status == -1)
    添加 classA
else if (status == 0)
    添加 classB
else
    添加 classC

能做到嗎？

場景需求：

 平臺安全：危險 通常 良好
回答
編輯回答
痞性

<div:class="{'active':this.status==0,'activetwo':this.status==1,'activethree':this.status==2}">
</div>

2018年5月20日 18:32
編輯回答
別瞎鬧

<span :class="switchStatus(status)">{{status}}</span>

data () {
return {

...
status:0

}
},

methods: {

switchStatus(status) {
    switch(status) {
        case -1:
            return 'classA;
        case 0: 
            return 'classB'
        case 1:
            return 'classC'
    }
}

}

2017年8月12日 20:32
編輯回答
赱丅呿

@xuliang 我之前也是這么寫的，然后沒有效果，后來換了一下位置就可以了

status === -1?(status===0?'classB':'classC'):'classA'
2017年11月22日 01:28
編輯回答
九年囚

建議用計算屬性

<span :class="safeCode">{{ status }}</span>
computed: {
    safeCode() {
        return this.status === -1 ? 'classA' : (this.status === 0 ? 'classB' : 'classC')
    }
}
2018年8月6日 19:45
編輯回答
生性
:class="status[state]"

data{
    status:{
        1:'classa',
        2:'classb',
        3:'classc'
    }
}

怎么沒有這么寫的？？

2017年1月21日 09:14
編輯回答
脾氣硬
status === -1?'classA':(status===0?'classB':'classC')
2018年3月23日 11:27