Vue之V-bind及class与style绑定

一.v-bind的使用方法

它的主要用法是动态更新HTML 元素上的属性

<a v-bind:href="url">链接</a> 
<img v-bind:src "imgUrl"> 

<!-- 缩写为 --＞
<a :href="url">链接</a> 
<img :src="imgUrl">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

链接的href属性和图片的src 属性都被动态设置了，当数据变化时，就会重新渲染。

在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式style的动态绑定，它们也是HTML的属性，因此可以使用v-bind指令。 我们只需要用v-bind计算出表达式最终的字符串就可以，不过有时候表达式的逻辑较复杂，使用字符串拼接方法较难阅读和维护，所以Vue.js增强了对class和style的绑定。

二.绑定class

1.<div :class="{ 'active': isActive }"></div>
对象中也可以传入多个属性，来动态切换class。 另外，：class可以与普通class共存，例如：
2.<div class="static" :class="{ 'active': isActive, 'error': isError }"></div> 
当数据isActive 或isError变化时，对应的class类名也会更新。 比如当isError为true 时，渲染后的结果为：
<div class="static active error"></div> 
3.数组语法
<div :class="[activeCls, errorCls)"></div>
4.三元表达式
<div :class="[{ 'active': isActive }, errorCls)"></div>

三.绑定style

1.CSS属性名称使用驼峰命名(camelCase)或短横分隔命名(kebab-case)
<div :style="{ 'color': color, 'fontSize': fontSize + 'px' }">文本</div>
2.便于阅读的写法,写到data中
<div :style="styles">文本</div>
data:{
    styles:{
        color:'red',
        fontsize:14+'px'
    }
}
3.应用多个样式对象时， 可以使用数组语法：
<div :style="[styleA, styleB]">文本</div>