Vue Class与Style 绑定

绑定 HTML Class

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

  <style>
      .a{color: red;}
      .b{font-size: 70px;}
  </style>
  

  <span v-bind:class="{a:textColor,b:fontSize}">hello world</span>
  

  data:{
      textColor : true,
      fontSize : true
  }
  

  绑定的数据对象不必内联定义在模板里，也可以简写为：

  <span v-bind:class="classObject">hello world</span>
  

  data:{
      classObject : {
          a : true,
          b : true
      }
  }
  

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

  <span v-bind:class="[colorClass,fontClass]">hello world</span>
  

  data:{
      colorClass : "a",
      fontClass : "b"
  }
  

绑定内联样式

• 对象语法
  v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

  <span v-bind:style="{color:textColor,fontSize:fontSize}">hello world</span>
  

  data:{
      textColor : "red",
      fontSize : "100px"
  }
  

  也可以绑定一个样式对象

  <span v-bind:style="text">hello world</span>
  

  data:{
      text:{
          color : "red",
          fontSize : "100px"
      }
  }
  

• 数组语法
  v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：

  <div v-bind:style="[baseStyles, overridingStyles]"></div>