v-bind 动态绑定

v-bind:class 可以动态的切换class---值对应的是 true 和false

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

// 对象方法
<div v-bind:class="{key:name}"></div>

data:{
    name: true
}

<style>
    .key{
        color: red;
    }
</style>

数组方法：当有多个class时，还可以使用数组语法，给class绑定一个数组，应用一个列表，数组成员直接对应className:类名

// 数组方法
<div :class="[name1,name2]"></div>
new Vue({
    data:{
        name1: "className1",
        name2: "className2"
    }
})
<style>
    .className1{color:red}
    .className2{color:blue}
</style>

数据和对象混用，数组第一个成员是对象

<div :class="[{active:name1}],name2"></div>

new Vue({
    el:"#app",
    data:{
        name1: true,
        name2: className
    }
})

<style>
    .active{color:red}
    .className{color:blue}
</style>

绑定内联样式：

<div :style="{'color':color,'fontSize':fontSize}"></div>

new Vue({
    el:'#app',
    data:{
        color: 'red',
        fontSize: 20 +'px'
    }
})

注意: css属性名称用驼峰名(camelCame)或短横分割 fontSize = font-size

使用 :sytle 时，vuejs 会自动给特殊css属性名增加前缀，如tranfrom 无需加前缀

v-bind 绑定的是活的属性