<style type="text/css">
.pRed{
color: red;
}
.fWeight{
font-weight: bolder;
}
</style>
<body>
<div id="app">
<h2>绑定类</h2>
<h3>多个类绑定</h3><!--多个类,用逗号隔开-->
<p v-bind:class="{pRed:isRed,fWeight:isFont}">样式绑定</p>
<h3>绑定在data上</h3><!--对象内直接类名进行判断-->
<p v-bind:class="classObj">样式绑定</p>
<h3>数组绑定</h3><!--数组内的值直接在data中一一对应指向类-->
<p v-bind:class="[pRedClass,fWeightClass]">样式绑定</p>
<h3>对象数组绑定</h3>
<!--以数组形式，内每个值又是对象括起来，对应key/value，在data中对key相对应的value进行布尔判断-->
<p v-bind:class="[{pRed:pRedClass},{fWeight:fWeightClass}]">样式绑定</p>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
//isFont:true,
//isRed:true,
//classObj:{
//pRed:true,
//fWeight:true,
//}
//pRedClass:'pRed',
//fWeightClass:'fWeight'
//pRedClass:true,
//fWeightClass:true
}
})
</script>
