v-bind及class与style绑定

一 、绑定class的两种方式
（1），对象语法
例1：
<div  :class = "{'active' : isActive}"></div>
var app = new Vue({
data : {
isActive: 'true'
}
})
这时的div 的 class = active
当 isActive: false 时  div 的 class 没有对应的值
例2：
<div class= 'static' :class = {'active' : isActive, 'error' : isError}> </div>
data : {
isActive : true,
isError : true
}
==>  <div class = 'static isActive error'></div>
(2) , 数组语法
<div  :class = "[activeCls, errorCls]">  </div>
data : {
activeCls: 'active',
errorCls: 'error'
}
渲染结果为：
<div class = "active error"></div>

  在数组语法中使用对象语法：
  <div :class = "[{'active' : isActive}, errorCls ]"></div>
      data : {          isActive: true,          errorCls: 'error'
      }

二 、绑定内联样式
: style , 方法和 :class的用法相似，不过，css属性名称使用驼峰命名(camelCase) 或短横分隔命名(debab-case)
例如：
<div :style = 'styles'></div>
data: {
styles: {
color : 'red',
fontSize : 14 + 'px'
}
}
渲染后的结果：
<div style = "color : red; font-size: 14px"></div>

作者：是归人不是过客
链接：https://www.jianshu.com/p/94937d70a45f