Vue动态样式绑定

猪八戒1.0

已于 2023-03-27 09:51:24 修改

阅读量584

点赞数

分类专栏： Vue 文章标签：前端 html vue.js

于 2023-03-21 15:43:13 首次发布

本文链接：https://blog.csdn.net/qq_58631644/article/details/129689144

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

class对象语法

<标签 :class="{class名称：布尔值}"></标签>

点第几个让第几个红

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.active{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in stuList" :class="{active:currentIndex==index}"  @click="currentIndex=index" >
					{{index}}---{{item}}
				</li>
			</ul>
			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				flag:false,
				currentIndex:-1,
				stuList:["张三","李四","王五"],
			},
		});
	</script>
</html>

class数组语法

<标签 :class="[条件是否成立？‘样式一’：‘样式二’]"></标签>

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.active {
				color: red;
			}
		</style>
		<!-- 我希望点击一下这个文字，就让它变红 -->
	</head>
	<body>
		<div id="app">
			<h2 :class="[true?'active':null]">标哥哥非常帅</h2>			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				flag:false
			},
		})
	</script>
</html>

点击就亮

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.active {
				color: red;
			}
		</style>
		<!-- 我希望点击一下这个文字，就让它变红 -->
	</head>
	<body>
		<div id="app">
			<h2 :class="[flag?'active':null]" @click="flag=true">标哥哥非常帅</h2>			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				flag:false
			},
		})
	</script>
</html>

两种语法实现红蓝来回切换

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.red {
				color: red;
			}
			.blue{
				color:blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 对象语法 -->
			<h2 :class="{red:flag,blue:!flag}" @click="flag=!flag">标哥哥非常帅</h2>
			<!-- 数组语法 -->
			<h2 :class="[flag?'red':'blue']" @click="flag=!flag">标哥哥非常帅</h2>			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				flag:true
			},
		})
	</script>
</html>

style动态样式绑定

语法格式

<标签 :style="{css属性名：css属性值}"></标签>

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.box{
				width:100px;
				height:100px;
				border:2px solid black;
			}
		</style>
		
	</head>
	<body>
		<div id="app">
			<!-- 输入框里面输入一个数值，则下面点正方形就有多大 -->
			<input type="text" v-model="x">
			<hr/>
			<div class="box" :style="{width:x+'px',height:x+'px'}"></div>
			<br/>
			<div class="box" :style="{width:xx}"></div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data: {
				x:100
			},
			computed:{
				xx:function(){
					return this.x+"px";
				}
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.box{
				width: 200px;
				height: 100px;
				font-size: 32px;
				border: 2px solid black;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<select v-model="x">
				<option value="red">红色</option>
				<option value="blue">蓝色</option>
				<option value="yellow">黄色</option>
				<option value="pink">粉色</option>
			</select>
			<hr>
			<div class="box" :style="{color:x}">
				标哥哥很帅
			</div>
			<!-- 要求
				选中上面的某一个颜色，下面盒子里面的文字颜色就要改变
			 -->
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				x:"red"
			}
		})
	</script>
</html>

在动态样式绑定里，如果样式名或属性名出现-横线，则去掉横线，横线后面的首字母大写，如background-color写成 backgroundColor

<!DOCTYPE html>
<html lang="zh">
	<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>
		<style>
			.box{
				width: 200px;
				height: 100px;
				font-size: 32px;
				border: 2px solid black;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<select v-model="x">
				<option value="red">红色</option>
				<option value="blue">蓝色</option>
				<option value="yellow">黄色</option>
				<option value="pink">粉色</option>
			</select>
			<hr>
			<div class="box" :style="{backgroundColor:x}">
				标哥哥很帅
			</div>
			<!-- 要求
				选中上面的某一个颜色，下面盒子里面的文字颜色就要改变
			 -->
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				x:"red"
			}
		})
	</script>
</html>

style数组语法用法有限，更多情况使用对象语法