Vue Class与Style 绑定

绑定 HTML Class

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

  hello world
  

  data:{
      textColor : true,
      fontSize : true
  }
  

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

  hello world
  

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

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

  hello world
  

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

绑定内联样式

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

  hello world
  

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

  也可以绑定一个样式对象

  hello world
  

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

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