Vue.js-多条件类绑定

问题描述

基于多个条件将类绑定到标签的正确方法是什么？

鉴于此标记，似乎在尝试编写多个条件时一个条件被另一个条件覆盖。

<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覆盖，因为第二个条件覆盖了第一类绑定。

在vue类绑定中，有没有办法以if,else if,else样式构造条件？

解决方法

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

   }

}