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中声明对象：

   <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>

效果：