携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情 >>
我们将样式绑定分为两种：一种是通过style绑定，一种是通过class绑定
样式绑定适用于 切换效果的实现，小规模用style，大规模用class
style绑定样式
这里需要用到v-bind指令，绑定style属性。在绑定的:style=" "引号中有三种写法。
第一种：直接写对象字面量，对象的属性值取data中的数据。
代码展示：
<div id="box">
<button @click="changecolor">点击切换文字颜色</button>
<div :style="{color:color}">测试文字</div>
</div>
<script>
new Vue({
el:"#box",
data:{
color:"red",
flag:false
},
methods: {
changecolor(){
this.flag=!this.flag
if (this.flag) {
this.color="yellow"
}else{
this.color="red"
}
}
},
})
</script>
第一个color是要改变的属性，第二个是我们data中设置的属性名，对应取数据。如果我们将style中第二个参数加上引号那么就会变成字符串，直接就把作为属性值，就如我们直接改为"blue",标签能得内容就变为蓝色。
第二种在data中声明对象：
<div id="box">
<button @click="changecolor">点击切换文字颜色</button>
<div :style="obj">测试文字</div>
</div>
<script>
new Vue({
el:"#box",
data:{
color:"red",
flag:false,
obj:{
color:"red"
}
},
methods: {
changecolor(){
this.flag=!this.flag
if (this.flag) {
this.obj.color="yellow"
}else{
this.obj.color="red"
}
}
},
})
</script>
第三种：在:style=""中写数组，这种方法综合前面了两种，可以两种形式都写在数组中，我们来给这个元素多加点样式：
<div id="box">
<button @click="changecolor">点击切换文字颜色</button>
<div :style="[size,bc,color,{width:width}]">测试文字</div>
</div>
<script>
new Vue({
el:"#box",
data:{
color:"red",
flag:false,
size:{
fontSize:"50px"
},
bc:{
backgroundColor:"gray"
},
color:{
color:"red"
},
width:"100px"
},
methods: {
changecolor(){
this.flag=!this.flag
if (this.flag) {
this.color.color="yellow"
}else{
this.color.color="red"
}
}
},
})
</script>
最终效果：点击就能使文字变色
class绑定样式
通过改变类名来实现页面变换效果，:class=""中，引号内也是有三种写法
第一种：直接写表达式，为data中的属性
代码：
<style>
.box1{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box2{
width: 50px;
height:50px;
background-color: green;
}
</style>
<div id="box">
<button @click="change">点击改变模块</button>
<div :class="mode">测试文字</div>
</div>
<script>
new Vue({
el:"#box",
data:{
mode:"box1",
flag:false
},
methods: {
change(){
this.flag=!this.flag
if (this.flag) {
this.mode="box2"
}else{
this.mode="box1"
}
}
},
})
</script>
效果：
初始状态：
点击后：
第二种写成对象，与style中写的对象有一点区别。在这种class属性绑定中对象的属性值为布尔值，当为true时，该属性值的属性为类名成立，反之不成立。
代码展示：
<style>
.box1{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box2{
width: 50px;
height:50px;
background-color: green;
}
.box3{
font-size: 20px;
color: red;
line-height: 50px;
}
</style>
<div id="box">
<div :class="{box1:isb,box3:isbo}">测试文字</div>
</div>
<script>
new Vue({
el:"#box",
data:{
isb:true,
isbo:true
},
})
</script>
效果：
这种方式对象的属性值会在data数据中去匹配，如果我们不需要改变当前类名时我们可以在行内直接将其写成true或者false，也是同样成立的。如：
<div :class="{box1:isb,box3:false}">测试文字</div> 这时box3类名就不存在div
第三种方式： class=""中写数组，数组内每一项可以写不同的形式，是前面的综合，这种形式我们平时都不会用，用的最多的就是写表达式。
代码展示：
<style>
.box1{
width: 100px;
height: 100px;
background-color: blueviolet;
}
.box2{
width: 50px;
height:50px;
background-color: green;
}
.box3{
font-size: 20px;
color: crimson;
}
.box4{
margin: 0 auto;
}
</style>
<div id="box">
<button @click="change">点击改变模块</button>
<div :class="mode">测试文字</div>
<!-- <div :class="{box1:isb,box3:isbo}">测试文字</div> -->
<div :class="['box3',{box2:isb},model]">arr</div>
</div>
<script>
new Vue({
el:"#box",
data:{
mode:"box1",
flag:false,
isb:true,
isbo:true,
model:"box4"
},
methods: {
change(){
this.flag=!this.flag
if (this.flag) {
this.mode="box2"
}else{
this.mode="box1"
}
}
},
})
</script>
效果：
