4.v-bind以及class与style的绑定

4.1.绑定class 的几种方式

4.1.1.对象语法

绑定class对象语法：对象的键是类名，值是布尔值

.active{
    color: red;
}
.bor{
    border: 1px solid #ccc;
}
aaa
data: {
    isActive: true,
    isBorder: false
}

当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时， 都可以使用 data 或 computed

.active{
    color: red;
}


    
zzzz

4.1.2.数组语法

当需要应用多个 class 时，可以使用数组语法，给:class 绑定一个数组，应用一个class列表：数组中每个成员都是class的类名

.active{
    color: red;
}
.current{
    font-size: 18px;
}
aaa
data: {
    one: 'active',
    two: 'current'
}

对象和数组混用：

aaa
data: {
    isActive: true,
    two: 'current'
}

4.2.绑定内联样式

aaa


data: {
    color: 'red',
    fontSize: '16px'
}

绑定内联样式：键代表style的属性值，值就代表属性对应的值

注意：vue中只要是大写字母，都会给你转换成-加小写
如：fontSize -----> font-size
dsfASDghG -----> dsf-a-s-dgh-g
所以在vue中不要使用中环线（‘-’）要用驼峰式代替