v-bind绑定class和style

1. 用v-bind可以绑定class

// 变量语法
<div id="ppp" :class="Red"></div>

data: {
       Red: 'red'
}

/******************/


// 对象语法，key表示classname，value表示布尔值
<div id="ppp" :class="{'red': isRed}"></div>

var app = new Vue({
    el: '#ppp',
    data: {
       isRed: true
    }
})


/******************/

//数组语法，值对应属性，属性值对应类名
<div id="ppp" :class="[blueClass,redClass]"></div>

data: {
       blueClass: 'blue',
       redClass: 'red'
}

// 对象语法和数组语法可混合使用
<div id="ppp" :class="[blueClass,{'red': isRed}]"></div>

var app = new Vue({
        el: '#app',
        data: {
            isRed: false,
            blueClass: 'blue'
        },
    })

2. 用v-bind同样可以绑定style
   key是属性，value对应属性对应的值。

    <span :style="{'color': color, 'font-size': fontSize+'px'}">hello world</span>

3. vue会把驼峰命名法自动转换为-小写字母，如fontSize会转换为font-size