Vue中的样式绑定

我们将样式绑定分为两种：一种是通过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中声明对象：


   "box">
        <button @click="changecolor">点击切换文字颜色button>
        <div :style="obj">测试文字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，也是同样成立的。如：

测试文字

第三种方式：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="['box3',{box2:isb},model]">arrdiv>
    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>

效果：