【Vue】class 与 style 样式绑定

最新推荐文章于 2023-07-04 20:24:34 发布

一颗不甘坠落的流星

最新推荐文章于 2023-07-04 20:24:34 发布

阅读量207

点赞数

分类专栏： Vue 全家桶

本文链接：https://blog.csdn.net/qq_45677671/article/details/125944520

版权

Vue.js style绑定 class绑定样式动态绑定条件类

关键词由CSDN通过智能技术生成

Vue 全家桶专栏收录该内容

32 篇文章 49 订阅

订阅专栏

文章目录

- style 样式绑定
- class 样式绑定

style 样式绑定

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- style -->
			<div :style="myStyle">春花秋月何时了</div>
			<div :style="{color:'yellow',border:'2px solid blue'}">春花秋月何时了</div>
			<div :style="[myStyle,fontSize]">春花秋月何时了</div>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					myStyle: {
						color: "pink"
					},
					fontSize: {
						fontSize: '20px'
					}
				},
			})
		</script>
	</body>
</html>

运行结果：

class 样式绑定

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.myclass {
			border: 1px solid blue;
			color: pink;
		}

		.active {
			color: green;
		}

		.danger {
			border: 2px dotted red;
		}

		.ac {
			background: lightblue;
		}
	</style>
	<body>
		<div id="app">
			<!-- class -->
			<div :class="myClass">春花秋月何时了</div>
			<div :class="{active:isActive,danger:isDanger}">春花秋月何时了</div>
			<div :class="[myClass,myac]">春花秋月何时了</div>
			<div :class="type?'active':'danger'">春花秋月何时了</div>
		</div>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据
					myClass: "myclass",
					myac: "ac",
					isActive: true,
					isDanger: true,
					type: true,
				},
			})
		</script>
	</body>
</html>