绑定class -vue

1、值为对象

:class = "{ 'text-red': isActive }"
data () {
  return {
    isActive : true
  }
}

 

:class = "color"
data () {
 return {
  　　color: {
    　　'text-red': true
  　　}
 }
}

 

:class = "color"
computed: {
   color: function () {
      return {
         'text-red' : true
      }
  }
}

2、值为数组

:class = "[color1, color2]"
data (){
  return {
     color1: "text-red",
     color2: "text-green"
  }
}

 

:class="[isActive ? activeCls : '',errorCls]"
data (){
  return {
     isActive:true,
     atvieCls:'active',
     errorCls:'error'
  }
}

 

:class="[{'active':isActive},errorCls]"
 data () {
   return {
      isActive:true,
      errorCls:'error'
   }    
}