Vue中Class与Style绑定

Class与 Style 绑定，数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组，此外，v-bind:class 指令可以与普通的 class 属性共存。

 

例1：<divv-bind:class="{ active: isActive }"></div>

 

例2：:class="{'title':status==1 && resticket.resTicket.type == 2 , 'title-blue': status==1&& resticket.resTicket.type == 1, 'title-gray': status==2 ||status==3}"

例3：<divv-bind:class="classObject"></div>

data: {

  isActive: true,

  error: null

},

computed:{

  classObject: function () {

    return {

      active: this.isActive && !this.error,

      'text-danger': this.error && this.error.type=== 'fatal',

    }

  }

}