基于多个条件将类绑定(bind)到标签的正确方法是什么?
鉴于此标签,似乎在尝试编写多个条件时,一个被另一个覆盖。
<q-tr :props="props"
:class=["(props.row.Name=='Row Name 1' || props.row.Name=='Row Name 2')?'text-bold':'bg-white text-black', (props.row.Name=='Row Name 3')?'text-green':'bg-white text-black']
>
</q-tr>
所以在上面的例子中text-bold
类被 bg-white text-black
覆盖因为第二个条件是覆盖第一个类绑定(bind)。有没有办法在
if, else if, else
中构造条件? Vue类绑定(bind)中的样式?
最佳答案
将该类属性绑定(bind)到名为 myClass
的计算属性:
<q-tr
:class="myClass"
>
</q-tr>
computed:{
myClass(){
if(this.props.row.Name=='Row Name 1' ){
return 'text-bold';
}
else if( this.props.row.Name=='Row Name 3'){
return 'text-green';
}
else{
return 'bg-white text-black'
}
}
}
关于javascript - Vue.js - 多条件类绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63373426/