Vue的Class 与 Style 绑定

如果想冬天改变class的样式，一般有以下几种写法

1、对象语法

  <div class="logo" :class="{'highlight':totalCount>0}">

这样表示当totalCount>0时，highlight这个样式有效

绑定多个class：

<div class="static"     v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>//和如下 data：data: {  isActive: true,  hasError: false}//结果渲染为：<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError的值为 true，class 列表将变为 "static active text-danger"。

我们也可以通过绑定一个计算属性，这里不作介绍。

2、数组语法

三元表达式：

<div class="pay" :class="[totalPrice>=minPrice?'enough':'not-enough']">

记住，三元表达式一定要写在[]内

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

这样表示当isactive为true时active才有效，errorclass是一直有效

如果想定义多个class：

<div v-bind:class="[activeClass, errorClass]"></div>data: {  activeClass: 'active',  errorClass: 'text-danger'}//渲染为：<div class="active text-danger"></div>

这里咋一看，对象语法和数组语法绑定多个class有相似之处，那么有什么区别呢？我个人理解，对象语法是通过控制值的Boolean值从而控制class，而数组更多的像把一个值直接赋值给这个class。当然，一般来说需要计算的表达式一般会写在{}内，除了三元表达式。

参考官网：https://cn.vuejs.org/v2/guide/class-and-style.html