梁灏 《Vue.js》 实战笔记
Edit me
了解 v-bind 指令
绑定class的几种方式
对象语法
动态切换是否赋予class属性。
也可以传入多个属性，来动态切换class，并且与静态class属性可以共存。
当:class的表达式过长，还可以绑定一个计算属性。一般当条件多于两个时，都可以使用data或computed，例如使用计算属性：
除了计算属性，可以直接绑定一个Object类型的数据，或者使用类似计算属性的 methods。
数组语法
当需要多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表。
也可以使用三元表达式来根据条件切换class，例如：
样式error会始终应用，当数据isActive为true时，active样式才会应用。
上面的写法比较繁琐，可以在数组语法中使用对象语法。
与对象语法一样，也可以使用data, computed, methods三种方法，以计算属性为例：
Note: 上面的例子中，可以看到return的数组里的第二个
Object类型的元素的key值用[]包围了起来，这是ES6的语法，为了确保key可以使用变量在组件上使用
需要components相关知识，先跳过，后面再补充。
绑定内联样式
v-bind:style或者:style，方法与:class类似，也有对象语法和数组语法，看起来很像直接在元素上写css。
Note: CSS属性名称使用驼峰命名法 (camelCase)，或短横分隔命名法 (kebab-case)。
大多数情况下，直接写一长串不便于阅读和维护，所以一般写在data或computed里。
应用多个样式对象时，可以使用数组语法：
<div :style="[styleA, styleB]">文本</div>
在实际业务中，绑定内联样式并不常用，因为往往可以写在同一个对象里面，较为常用的是计算属性。另外，使用:style时，会自动给特殊的CSS属性名称增加前缀，比如transform。