javascript - Vue.js - 多条件类绑定(bind)

Question

基于多个条件将类绑定(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)中的样式？

Answer 1

将该类属性绑定(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'
      } 

   }

}