19.Vue绑定style样式

最新推荐文章于 2024-05-26 19:20:24 发布

修罗_

最新推荐文章于 2024-05-26 19:20:24 发布

阅读量212

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45843676/article/details/122988885

版权

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
		<style type="text/css">
			/* 			.basic {
				color: #000000;
				background-color: #aaaaff;
			} */
			.basic {
				height: 100px;
				width: 100px;
			}

			.happy {
				background-color: black;
				color: aliceblue;
			}

			.normal {
				background-color: skyblue;
				color: #fffff;
			}

			.sad {
				color: #7FFF00;
			}

			.calm {
				background-color: #7133eb;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<!-- 类名动态声明 -->
			<div class="basic" id="demo" :class="mood" @click="changeMood">{{name}}1</div>
			<div class="basic" :class="classArr">{{name}}2</div>
			<div class="basic" :class="classArr2">{{name}}3</div>
			<div class="basic" :style="styleObj">{{name}}4</div>
			<div class="basic" :style="{fontSize:size+'px'}">{{name}}5</div>
		</div>
	</body>
</html>

<script type="text/javascript">
	new Vue({
		el: '#root',
		data: {
			name: 'China',
			mood: 'normal',
			//常用数组动态样式
			classArr: [
				'calm',
				'sad'
			],
			//使用对象动态设置样式
			classArr2: {
				calm: 'calm',
				sad: 'sad'
			},
			//手动指定样式是否用
			classObj: {
				calm: false,
				sad: true
			},
			//单个style绑定
			size: 40,
			//使用对象多个style绑定
			styleObj: {
				color: 'blue',
				backgroundColor: 'red'
			}
		},
		methods: {
			changeMood() {
				//随机动态颜色
				const list = ['happy', 'normal'];
				const index = Math.floor(Math.random() * 2);
				this.mood = list[index];
			}
		}
	})
</script>