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

4.1.绑定class 的几种方式

4.1.1.对象语法

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

.active{
    color: red;
}
.bor{
    border: 1px solid #ccc;
}
<div :class="{active:isActive,bor: isBorder}">aaa</div>
data: {
    isActive: true,
    isBorder: false
}

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

.active{
    color: red;
}
</style>
<div id="app">
    <div :class="isActive">zzzz</div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isBlue: true,
            isRed: false
        },
        computed: {
            isActive(){
                return {
                    //只要是class里面的键都是类名
                    active: this.isBlue && !this.isRed
                }
            }
        }
｝
</script>

4.1.2.数组语法

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

.active{
    color: red;
}
.current{
    font-size: 18px;
}
<div :class="[one,two]">aaa</div>
data: {
    one: 'active',
    two: 'current'
}

对象和数组混用：

<div :class="[{active:isActive},two]">aaa</div>
data: {
    isActive: true,
    two: 'current'
}

4.2.绑定内联样式

<div :style="{color:color,fontSize:fontSize}">aaa</div>
<!--等价于-->
<div style="color: red;font-size: 16px"></div>
data: {
    color: 'red',
    fontSize: '16px'
}

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

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