- 用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'
},
})
- 用v-bind同样可以绑定style
key是属性，value对应属性对应的值。
<span :style="{'color': color, 'font-size': fontSize+'px'}">hello world</span>
- vue会把驼峰命名法自动转换为-小写字母，如fontSize会转换为font-size
