4.v-bind 及 class 与 style 绑定

4.1 了解 v-bind 指令

v-bind：动态更新HTML元素上的属性

之前的示例：
    v-vind:href="url"  
    v-bind:src="imgUrl" 
-->   data:{url:'   ', imgUrl:'  '}
----------------
    当数据变化时（如：href,src,class,style），就会重新渲染

4.2 绑定class的几种方式

• 动态切换 :class={'class1':true/false,'class2':true/false...}

div#app
    <div v-bind:class="{'active':isActive,'error':isError}"></div>
script->new Vue()
    data:{
        isActive:true,
        isError:false
    }
---
    动态的切换class，为true则加载。表达式复杂时还可使用计算属性(或 methods)。

• 数组语法 :class="[varCalssName1,varClassName2,...]"

• 数组语法中使用对象语法

• 在组件上使用

4.3 绑定内联样式

• 对象语法

div -> :style="{'color':color,'fontSize':fontSize+'px'}"
data -> color:'red',fontSize:14

• 样式写在 data 或 computed里

div -> :style="styles"
data -> styles:{color:'red',fontSize:14+'px'}