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