操作元素的class列表和内联样式是数据绑定的一种常见需求，是attribute，可以使用v-bind处理它们，通过表达式计算出字符串结果。
我们可以传给 v-bind:class 一个对象，以动态地切换 class；
<style>
.active{
background-color:red;
}
.fontStyle{
color:green;
}
</style>
<body>
<div id="app">
<p id="p1" v-bind:class="{‘active‘:isActive,‘fontStyle‘:isFontStyle}">段落的格式</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
isActive:true,
isFontStyle:true
}
})
var ele=document.getElementById("p1");
ele.innerHTML=ele.className;
</script>
这个例子中表达式active根据isActive取值决定是否渲染，以此动态的绑定class。
将一个数组传给class，例如<div v-bind:class="[active,fontStyle]"
其中的属性还可以通过三元表示书写v-bind:class="[isActive ? ‘active‘ : ‘‘,‘fontStyle‘
另外，对象语法的方式也可以使用v-bind:class="[{‘active‘:isActive},‘fontStyle‘]"
v-bind:style的对象语法与css类似，具体property在data中定义
<div id="app">
<p id="p1" v-bind:style="{color:color,backgroundColor:backgroundColor}">段落的格式</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
color:‘green‘,
backgroundColor:‘red‘
}
})
</script>
可以直接绑定样式对象，定义带data中。
<div id="app">
<p id="p1" v-bind:style="active">段落的格式</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
active:{
color:‘green‘,
backgroundColor:‘red‘
}
}
})
</script>
可以将多个对象应用到一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
原文：https://www.cnblogs.com/508335848vf/p/12889006.html