本篇为Vue的基础篇，主要关于 v-bind: class与style的动态绑定。
1. 绑定 class 的几种方式
1.1 对象语法
给 v-bind:class 设置一个对象，可以动态地切换 class，对象里的 key是类名，value 对应 true ,false。
html代码：
<div id="app">
<!-- 绑定class：对象语法 -->
<div v-bind:class="{divStyle: isActive}">我是class 对象语法</div>
<!-- 点击按钮背景色 红 蓝 切换 -->
<button v-on:click="changeColor" :class="{initStyle: isInit, otherStyle: isOther}">点我换背景色</button>
<!-- 绑定class：计算属性 -->
<div v-bind:class="classNames">我是class 计算属性</div>
</div>
JavaScript 代码：
var app = new Vue({
el: '#app',
data: {
isActive: true,
isInit: true,
isOther: false
},
methods:{
changeColor: function(){
this.isOther = !this.isOther
}
},
computed: {
classNames: function(){
return {
divStyle: this.isActive
}
}
}
})
1.2 数组语法
数组成员直接对应className--类名，数组中的每个成员都会在 data属性中定义。
html代码：
<!-- 绑定class：数组语法 -->
<div v-bind:class="[divClass,borderClass]">我是class 数组语法</div>
<!-- 绑定class：对象 数组语法混用 -->
<div v-bind:class="[{initStyle:isInit},borderClass]">我是class 对象数组混用</div>
JavaScript 代码：
var app = new Vue({
el: '#app',
data: {
isActive: true,
isInit: true,
isOther: false,
isBorder: false,
//数组语法
divClass: 'divStyle',
borderClass: 'borderStyle',
}
})
2. 绑定内联样式
使用 v-bind:style （即：style） 可以给元素绑定内联样式，方法与 ：class 类似，也有对象语法和数组语法（不常用）。
注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebab-case）
html代码：
<!-- 绑定内联样式：对象语法 -->
<div v-bind:style="{'color': color,'fontSize': fontSize+'px'}">我是style 对象语法</div>
JavaScript 代码：
var app = new Vue({
el: '#app',
data: {
isActive: true,
isInit: true,
isOther: false,
isBorder: false,
//数组语法
divClass: 'divStyle',
borderClass: 'borderStyle',
//内联语法
color: 'red',
fontSize: 16
}
})
