Vue之V-bind及class与style绑定

一.v-bind的使用方法

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

链接 
 

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

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

二.绑定class

1.

对象中也可以传入多个属性，来动态切换class。 另外，：class可以与普通class共存，例如：
2.
 
当数据isActive 或isError变化时，对应的class类名也会更新。 比如当isError为true 时，渲染后的结果为：
 
3.数组语法

4.三元表达式

三.绑定style

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