样式绑定

1、class样式处理

对象语法

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

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 真实性。

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

// template
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

// 业务逻辑
data: { 
　　isActive: true, 
　　hasError: false 
}

结果渲染为：

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

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

来看一个简单例子，实现切换功能

// css
.active {
     width: 100px;
     height: 100px;
     border: 1px solid red;
}

// template
<div :class="{active:isActive}"></div>
<button @click="change">切换</button>

// 业务逻辑
data: {
    isActive: true
},
methods: {
    change: function () {
        this.isActive = !this.isActive;    // 采用取反的方式实现切换
    }
}

绑定的数据对象不必内联定义在模板里：

// template
<div v-bind:class="classObject"></div>

// 业务逻辑
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

// 绑定一个返回对象的计算属性。这是一个常用且强大的模式：

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

// template
<div v-bind:class="[activeClass, errorClass]"></div>

// 业务逻辑
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

<div class="active error">测试文字</div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

// css
.active {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

.error {
    background-color: orange;
}

// template
<div v-bind:class="[flag?activeClass : '', errorClass]">测试文字</div>
<button @click="change">切换</button>

// 业务逻辑
data: {
    flag: true,
    activeClass: 'active',
    errorClass: 'error'
},
methods: {
    change: function () {
        this.flag = !this.flag
    }
}

样式绑定的相关细节：
1、对象绑定可以和数组绑定结合使用

2、class绑定的值可以简化操作（不要写在内联样式当中，造成代码的可读性差）

3、v-bind:class 指令也可以与普通的 class attribute 共存