样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

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

逻辑上，vue 需要 isActive 的值是一个 boolean 值，vue 根据它是 true 还是 false 来决定是否对 <div> 使用 active 样式。

如果，isActive 的值有变动（甚至是切换）， <div> 就会在『使用 active 样式』和『未使用 active 样式』两种情况中对等变动（或切换）。

• 提前要对 div 启用的样式

  <style type="text/css">
  
  .active {
    background-color: antiquewhite;
  }
  
  /*
  .un-active {
    background-color: greenyellow;
  }
  */
  </style>
  

• 页面上的 <div> 元素

  <div style="width: 200px; height: 200px; border: 1px solid black;" 
       v-bind:class="{'active': isActive}">
  </div>
  

• vue 代码

  new Vue({
    el: '#app',
    data: function () {     
      return {
        isActive: false
      }
    },
    created: function () {
      setInterval(() => {
        this.isActive = !this.isActive;
      }, 1000);
    }
  });