Vue学习笔记（七）：绑定css样式

 

 

1 绑定class样式¶

vue为HTML绑定css中的class样式是通过v-bind实现的。

 

 

1.1 绑定单个class¶

把需要绑定的样式class名赋值给一遍变量，然后通过变量v-bind绑定class属性，绑定后的class并不会覆盖原来的class属性，而是与原来的class进行叠加。如下所示，div初始时便有一个class1的属性，然后通过v-bind绑定了myclass变量，与时多了一个class2，页面刷新后，div便有了两个class属性：class1和class2；当点击div后，myclass值修改为class3，于是，div的class变成了class1和class3.

<div id="root">
    		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    		<!-- 这是完整写法
                <div class="class1" v-bind:class="myClass" @click="changeClass"></div>
                下面这个是缩写：
            -->
    		<div class="class1" :class="myClass" @click="changeClass"></div> <br/><br/>

    	</div>
        <style>
.class1{
width:400px;
height:100px;
border:1pxsolidblack;
}

.class2{
border:4pxsolidred;;
background-color:rgba(255,255,0,0.644);
background:linear-gradient(30deg,yellow,pink,orange,yellow);
}
.class3{
border:4pxdashedrgb(2,197,2);
background-color:gray;
}
</style>

        <script type="text/javascript">
            Vue.config.productionTip = false

            const vm = new Vue({
                el:'#root',
                data:{
                    myClass:'class2',
                },
                methods: {
                    changeClass(){
                        this.myClass = 'class3'
                    }
                },
            })
        </script>

 

 

 

 

 

 

1.2 同时绑定多个class¶

（1）数组形式绑定

将所有需要绑定的样式class名称放入一个数组里，通过v-bind绑定数组，即可实现同时绑定多个class:

<div id="root">
    		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    		<!-- 这是完整写法
                <div class="class1" v-bind:class="myClass"></div>
                下面这个是缩写：
            -->
    		<div class="class0" :class="myClass"></div> <br/><br/>

    	</div>
        <style>
.class0{
width:400px;
height:100px;
border:1pxsolidblack;
}
.class1{
background-color:yellowgreen;
}
.class2{
font-size:30px;
text-shadow:2px2px10pxred;
}
.class3{
border-radius:20px;
}
</style>

        <script type="text/javascript">
            Vue.config.productionTip = false

            const vm = new Vue({
                el:'#root',
                data:{
                    myClass:['class1', 'class2', 'class3'], // 多个class
                }
            })
        </script>

 

 

 

 

**（2）对象形式绑定

<div id="root">
    		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    		<!-- 这是完整写法
                <div class="class1" v-bind:class="myClass"></div>
                下面这个是缩写：
            -->
    		<div class="class0" :class="myClass"></div> <br/><br/>

    	</div>
        <style>
.class0{
width:400px;
height:100px;
border:1pxsolidblack;
}
.class1{
background-color:yellowgreen;
}
.class2{
font-size:30px;
text-shadow:2px2px10pxred;
}
.class3{
border-radius:20px;
}
</style>

        <script type="text/javascript">
            Vue.config.productionTip = false

            const vm = new Vue({
                el:'#root',
                data:{
                    myClass:{   // 对象形式绑定class，当值为true时，样式生效
    					class1: true,
    					class2: false,
    					class3: true
    				}
                }
            })
        </script>

 

 

因为class2的value值为false，所以并未板吊顶class2的值：

 

 

 

 

2 绑定style样式¶

vue也可以直接绑定style样式，此时，将style各样式以对象形式书写，并复制给一个变量，再通过v-bind进行绑定：

<div id="root">
    		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    		<!-- 这是完整写法
                <div class="class0" v-bind:style="myStyle"></div>
                下面这个是缩写：
            -->
    		<div class="class0" :style="myStyle">vue</div> <br/><br/>

    	</div>
        <style>
.class0{
width:400px;
height:100px;
border:1pxsolidblack;
}
</style>

        <script type="text/javascript">
            Vue.config.productionTip = false

            const vm = new Vue({
                el:'#root',
                data:{
                    myStyle:{   // 绑定样式
    					fontSize: "40px",
    					color: "red"
    				}
                }
            })
        </script>