Vue学习笔记(七):绑定css样式

1 绑定class样式[¶](#1 绑定class样式¶)

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

1.1 绑定单个class[¶](#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.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样式[¶](#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>
相关推荐
巛、1 分钟前
ES6面试题
前端·面试·es6
周全全27 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙42 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九1 小时前
html、css(javaweb第一天)
前端·css·html
y东施效颦1 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿1 小时前
《开篇:课程目录》
前端·c#
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
沉香亭北3 小时前
vue+vite 全局主题
前端