Class and Style Bindings

F12 

v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。


绑定内联样式 - 对象语法
:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
1. v-bind:class 简写 :class;
{}内的: 左侧active是html本身，右侧是实例中定义的变量 isActive
vm.isActive={{isActive}}
2.
可以设置多个类名，并与普通的class并存: vm.hasError=false
3. vm.classObject.active=0; vm.classObject['text-danger']=1; vm.classObject['round']=1
绑定的数据对象不必内联定义在模板里。可以定义在实例的data()中。
4. vm.error={type:'fatal'}
在计算属性中定义，是一个更常用、更强大的方式。
5. vm.activeClass="round"
5.1数组语法 :class="[activeClass, errorClass]"
vm.isActive=false;
5.2根据条件切换 :class="[isActive ? activeClass:"", errorClass]"
//更简单的写法是对象语法
5.3对象语法 :class="[{ active: isActive }, errorClass]"
6. 绑定内联样式
对象语法
直接绑定到一个样式对象, 这会让模板更清晰
数组语法