样式绑定之对象语法

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。接下来看一下Vue中的样式绑是如何进行的，有几种方式

class 对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div :class="{active: zgActive}"></div>

data(){
  return {
    zgActive: true
  }
}

上面的语法表示 active 这个 class 存在与否将取决于数据中的zgActive

你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：

<div
  class="basic"
  :class="{active: isActive, 'text-danger': isActive2}"
>
 
</div>

和如下data:

data(){
  return {
    isActive: true,
    isActive2: false
  }
}

结果渲染为：

<div class="basic active"></div>

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

绑定的数据对象里面的属性较多的情况下，可以将其定义在data中

<div :class="classObj"></div>

data(){
  return {
    classObj: {
      active: true,
      'text-danger': false
    }
  }
}

渲染结果和上面是一样的。我们还可以使用一个计算属性通过返回对象的形式来进行绑定。而且这还是一个常用且强大的模式：

<div :class="classObj"></div>

data(){
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObj(){
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

style对象语法

v-bind:style的对象语法十分直观，看起来非常像css，但其实就是一个js对象

<div :style="{color: activeColor, fontSize: fontSize + 'px'}"></div>

data(){
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

同理，属性较多的情况，我们定义样式对象来进行绑定，同时也让你的模板更加清晰

<div :style="styleObj"></div>

data(){
  return {
    styleObj: {
      color: 'red',
      fontSize: '14px'
    }
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

data(){
  return {
    color: 'red',
    fontSize: '14px'
  }
},
computed: {
  styleObj(){
    return {
      color: this.color,
      fontSize: this.fontSize
    }
  }
}