导语：class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
class 属性绑定
一、绑定数组样式
<div v-bind:class="[activeClass, textClass]">
<span>清风无虑skr</span>
</div>
二、绑定单一样式
<div v-bind:class="{ active: isActive }">
<span>清风无虑skr</span>
</div>
三、绑定多个样式
<div v-bind:class="{ active: isActive, 'text': istext }">
<span>清风无虑skr</span>
</div>
四、绑定数据里的对象
<div v-bind:class="classObject">
<span>清风无虑skr</span>
</div>
五、绑定三元表达式样式
<div v-bind:class="[errorClass ,isActive ? activeClass : '']">
<span>清风无虑skr</span>
</div>
其实就是通过v-bind:class="{}“或v-bind:class=[]或v-bind:class=”{active:isActive,error:hasError}"方式为模板绑定class，
首先要在css中设置.active和.text，然后在Vue实例的data对象中设置isActive和istext的布尔值；也可以直接传一个对象给class,即v-bind:class="classObj，再在data对象上直接赋值
var vm=new Vue({
el: '#app',
data: {
activeClass: 'active',
textClass: 'text'
}
})
var vm2=new Vue({
el: '#app2',
data: {
isActive: false,
istext:true
}
})
var vm3=new Vue({
el: '#app3',
data: {
classObject: {
active: true,
'text': false
}
}
})
五种情况的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.active {
width: 100px;
height: 100px;
color: green;
background: red;
text-align:center;
line-height:100px;
}
.text {
color: red;
background: green;
text-align:center;
line-height:100px;
}
</style>
<body>
<!-- class 属性绑定 -->
<!-- 绑定数组样式 -->
<div id="app">
<div v-bind:class="[activeClass, textClass]">
<span>清风无虑skr</span>
</div>
</div>
<!-- 绑定单一样式 -->
<div id="app1">
<div v-bind:class="{ active: isActive }">
<span>清风无虑skr</span>
</div>
</div>
<!-- 绑定多个样式 -->
<div id="app2">
<div v-bind:class="{ active: isActive, 'text': istext }">
<span>清风无虑skr</span>
</div>
</div>
<!-- 绑定数据里的对象 -->
<div id="app3">
<div v-bind:class="classObject">
<span>清风无虑skr</span>
</div>
</div>
<!-- 绑定三元表达式样式 -->
<!-- 期间errorClass控制的样式一直存在，activeClass样式则是通过isActive的取值（true或false）来实现，可知errorClass的样式将覆盖ctiveClass的样式 -->
<div id="app4">
<div v-bind:class="[errorClass ,isActive ? activeClass : '']">
<span>清风无虑skr</span>
</div>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
activeClass: 'active',
textClass: 'text'
}
})
var vm1=new Vue({
el: '#app1',
data: {
isActive: true
}
})
var vm2=new Vue({
el: '#app2',
data: {
isActive: false,
istext:true
}
})
var vm3=new Vue({
el: '#app3',
data: {
classObject: {
active: true,
'text': false
}
}
})
var vm4=new Vue({
el: '#app4',
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text'
}
})
</script>
</body>
</html>
style(内联样式)
一、直接设置样式
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">在你面前说不用太努力的人，都在你背后默默的拼命呢</div>
</div>
二、通过数据对象来设置样式
<div id="app1">
<div v-bind:style="styleObject">我们总以为,是生活欠我们一个“满意”,其实是我们欠生活一个“努力”。</div>
</div>
三、通过多个数据对象控制一个元素样式
<div id="app2">
<div v-bind:style="[onestyles, twostyles]">你可能看不到我努力的过程，但我一定会让你看到我努力的结果！</div>
</div>
三种情况的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 直接设置样式 -->
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">在你面前说不用太努力的人，都在你背后默默的拼命呢</div>
</div>
<!-- 通过数据对象设置样式 -->
<div id="app1">
<div v-bind:style="styleObject">我们总以为,是生活欠我们一个“满意”,其实是我们欠生活一个“努力”。</div>
</div>
<!-- 通过多个数据对象控制一个元素样式 -->
<div id="app2">
<div v-bind:style="[onestyles, twostyles]">你可能看不到我努力的过程，但我一定会让你看到我努力的结果！</div>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30
}
})
var vm1=new Vue({
el: '#app1',
data: {
styleObject: {
color: 'blue',
fontSize: '30px'
}
}
})
var vm2=new Vue({
el: '#app2',
data: {
onestyles: {
color: 'yellow',
fontSize: '50px'
},
twostyles: {
background: 'red'
}
}
})
</script>
</body>
</html>
心得：
今天学习了vue.js的样式绑定，感觉不是太难，基本情况大致分为class和style两种绑定方式，但都需要v-bind来处理，其中的绑定方式大致可以细分为上面八种，认真看下其实不难，基本就是通过绑定一些数据对象或通过数组对象来实现样式的绑定。
若有问题可以私信我，一起讨论学习。