绑定 HTML Class
字符串语法
模板：
<div
class="static"
:class="active"
></div>
data：
data: {
active: 'red'
}
结果渲染为：
<div class="static red"></div>
对象语法
模板：
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
data：
data: {
isActive: true,
hasError: false
}
结果渲染为：
<div class="static active"></div>
数组语法
模板：
<div :class="[activeClass, errorClass]"></div>
data：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger"></div>
绑定内联样式
对象语法
模板：
<div v-bind:style="styleObject"></div>
data：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
渲染为：
<div style="color:red,font-size:13px"></div>
数组语法
数组语法可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
DEMO
<style>
.red {
color: red
}
.blue {
color: blue
}
.font20 {
font-size: 20px
}
</style>
</head>
<body>
<div id="app">
<h1>class绑定</h1>
<h2 :class="classA">字符串语法</h2>
<h2 :class="{blue:isBlue}">对象语法</h2>
<h2 :class="[classA, font20]">数组语法</h2>
<br>
<h1>style绑定</h1>
<h2 :style="{fontSize:'30px',backgroundColor:'blue',color:'white'}">对象语法</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const vue = new Vue({
el: '#app',
data: {
classA: 'red',
font20: 'font20',
isBlue: true,
}
})
</script>
</body>
