Vue.js - 多条件 class 绑定
Vue.js - multiple condition class binding
根据多个条件将 class 绑定到标签的正确方法是什么?
鉴于此标签,似乎在尝试编写多个条件时,一个条件被另一个条件覆盖。
<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
class 被 bg-white text-black
覆盖,因为第二个条件覆盖了第一个 class 绑定。
有没有办法在 vue class 绑定中以 if, else if, else
样式构造条件?
将 class 属性绑定到名为 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'
}
}
}
根据多个条件将 class 绑定到标签的正确方法是什么?
鉴于此标签,似乎在尝试编写多个条件时,一个条件被另一个条件覆盖。
<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
class 被 bg-white text-black
覆盖,因为第二个条件覆盖了第一个 class 绑定。
有没有办法在 vue class 绑定中以 if, else if, else
样式构造条件?
将 class 属性绑定到名为 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'
}
}
}