vue :class 三种状态怎么写？

Question

比如传来的数据

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

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

<span :class="怎么写？">{{status}}</span>

if (status == -1)
    添加 classA
else if (status == 0)
    添加 classB
else
    添加 classC

能做到吗？

场景需求：

 平台安全：危险 通常 良好

Answer 1

@xuliang 我之前也是这么写的，然后没有效果，后来换了一下位置就可以了

status === -1?(status===0?'classB':'classC'):'classA'

Answer 2

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

Answer 3

:class="status[state]"

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

怎么没有这么写的？？

Answer 4

status === -1?'classA':(status===0?'classB':'classC')

Answer 5

建议用计算属性

<span :class="safeCode">{{ status }}</span>

computed: {
    safeCode() {
        return this.status === -1 ? 'classA' : (this.status === 0 ? 'classB' : 'classC')
    }
}

Answer 6

<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'
    }
}

}