绑定class样式\style绑定样式

最新推荐文章于 2024-03-11 18:22:52 发布

moonbaby1

最新推荐文章于 2024-03-11 18:22:52 发布

阅读量1.2k

点赞数 1

分类专栏： # VUE 文章标签： html javascript css

本文链接：https://blog.csdn.net/hhcharming/article/details/123466595

版权

VUE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.绑定class样式

写法：class = "xxx",xxx可以是字符串、对象、数组

字符串写法适用于：类名不确定、要动态获取

对象写法适用于：要绑定多个样式、个数不确定、名字也不确定

数组写法适用于：要绑定多个样式，个数确定、名称确定，但不确定用不用

二.style样式绑定

：style = "{fontSize: xxx}"其中xxx是动态值

：style = "[a,b]"其中a,b是样式对象

说明：样式对象的是存在的，不能瞎写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>姓名案例</title>
        <style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.happy{
				width: 400px;
				height: 100px;
				border: 1px solid red;
				background-color: red;
			}
			.sad{
				width: 400px;
				height: 100px;
				border: 1px solid green;
			}
			.normol{
				width: 400px;
				height: 100px;
				border: 1px solid black;
				background-color: brown;
			}
			.atguigu1{
				width: 400px;
				height: 100px;
				border: 1px solid black;
				background-color: aquamarine;
			}
			.atguigu2{
				width: 400px;
				height: 100px;
				border: 1px solid black;
				background-color: blue;
			}
			.atguigu3{
				width: 400px;
				height: 100px;
				border: 1px solid black;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
        <!-- 容器 -->
        <div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
            <div class="basic" :class ="mood" @click="changeMood">{{name}}</div><br/><br/>
			<!-- 绑定class样式--数组写法，适用于：要绑定的样式不确定，名字也不确定 -->
			<div class="basic" :class ="classarr" >{{name}}</div><br/><br/>
			<!-- 绑定class样式--对象写法，适用于：要绑定的样式确定，名字也确定，但要动态决定用不用 -->
			<div class="basic" :class ="classObj" >{{name}}</div><br/><br/>
			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style ="styleObj">{{name}}</div><br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style ="styleArr">{{name}}</div><br/><br/>
			
        </div>
        
		<script type="text/javascript" >
        Vue.config.productionTip = false
        new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classarr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false
				},
				styleObj:{
					fontSize:'40px',
					color:'red'
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
				{
					fontSize:'40px',
					color:'blue'
				},
				{
					backgroundColor:'gray'
				}
				]
			},
			methods:{
				changeMood(){
					//this.mood = 'happy'
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			}
		})
        </script>
	</body>
</html>

moonbaby1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绑定class样式\style绑定样式

一.绑定class样式写法：class = "xxx",xxx可以是字符串、对象、数组字符串写法适用于：类名不确定、要动态获取对象写法适用于：要绑定多个样式、个数不确定、名字也不确定数组写法适用于：要绑定多个样式，个数确定、名称确定，但不确定用不用二.style样式绑定：style = "{fontSize: xxx}"其中xxx是动态值：style = "[a,b]"其中a,b是样式对象说明：样式对象的是存在的，不能瞎写<!DOCTYPE html>&l
复制链接

扫一扫