Vue绑定样式

     class样式（常用）前提是那些css样式需要事先写好
        写法：class="XXX" XXX可以是字符串，对象，数组
        字符串写法适用于： 类名不确定，要动态获取
        数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
        对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
    style样式
        ：style="{fontSize:XXX}" 其中XXX是动态值
        ：style = "[a,b]",其中a,b是样式对象

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    .basic{
        width: 200px;
        height: 200px;
        border: 2px black solid;
    }
 
 
    .happy{
        background-color: red;
    }
    .nomal{
        background-color: skyblue;
    }
    .sad{
        background-color: black;
    }
 
 
    .style1{
        box-shadow: 10px 10px 5px rgba(0, 0, 0, .3);
    }
    .style2{
        border-radius: 25%;
    }
    .style3{
        font-size: 20px;
    }
 
 
 
</style>
 
 
<body>
    <div id="root">
        <!-- 绑定class样式  字符串写法 -->
        <div class="basic" :class="mood">{{name}}</div> <br><br>
        <!-- 绑定class样式  数组写法 -->
        <div class="basic" :class="classArr">{{name}}</div> <br><br>
        <!-- 绑定class样式  对象写法 -->
        <div class="basic" :class="classObj">{{name}}</div> <br><br>
 
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"林",
                mood:"nomal",
                classArr:["style1","style2","style3"],
                classObj:{
                    happy:true,  //左边样式名，右边boolean
                    style2:true,
                    style1:true
                }
            }
        })
    </script>
</body>
</html>

posted @ 2022-07-16 17:41 小罗要有出息阅读(65) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· el和data的两种写法

· Vue非单元组件

· Vue 绑定样式

· [Vue]样式绑定 :class :style

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue绑定样式

Vue绑定样式

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	class样式（常用）前提是那些css样式需要事先写好
	写法：class="XXX" XXX可以是字符串，对象，数组
	字符串写法适用于：类名不确定，要动态获取
	数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
	对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
	style样式
	：style="{fontSize:XXX}" 其中XXX是动态值
	：style = "[a,b]",其中a,b是样式对象

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数据绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<style>
	.basic{
	width: 200px;
	height: 200px;
	border: 2px black solid;
	}


	.happy{
	background-color: red;
	}
	.nomal{
	background-color: skyblue;
	}
	.sad{
	background-color: black;
	}


	.style1{
	box-shadow: 10px 10px 5px rgba(0, 0, 0, .3);
	}
	.style2{
	border-radius: 25%;
	}
	.style3{
	font-size: 20px;
	}



	</style>


	<body>
	<div id="root">
	<!-- 绑定class样式字符串写法 -->
	<div class="basic" :class="mood">{{name}}</div> <br><br>
	<!-- 绑定class样式数组写法 -->
	<div class="basic" :class="classArr">{{name}}</div> <br><br>
	<!-- 绑定class样式对象写法 -->
	<div class="basic" :class="classObj">{{name}}</div> <br><br>

	</div>
	<script>
	Vue.config.productionTip = false;
	new Vue({
	el:"#root",
	data:{
	name:"林",
	mood:"nomal",
	classArr:["style1","style2","style3"],
	classObj:{
	happy:true, //左边样式名，右边boolean
	style2:true,
	style1:true
	}
	}
	})
	</script>
	</body>
	</html>