转载自：https://segmentfault.com/q/1010000009921389
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">test
</div>
JS代码
var vm=new Vue({
el:'#example',
data:{
isActive:true,
hasError:true
}
});
解答：
因为 {}内的代码是要拿去当js解析的，js中变量是没有用 ' - '号连接
就像 css中 font-size 是用 - 号连接
到了js中 就必须用驼峰的写法`
html:
<a v-bind:href="href" :class="{'active':true}">百度</a>
css:
.active{
color:red;
}
效果：百度两个字威红色
<a v-bind:href="href" :class="{'active':false}">百度</a>
效果：百度两个字不变色
<a v-bind:href="href" :class="{'active':"随便写个"}">百度</a>
效果：百度两个字变红色
