Vue的学习之class与style绑定

news2024/10/6 3:22:24

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue的学习</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- test是一个普通的css的样式 -->
			<!-- v-bind对class样式进行绑定，
			通过isActive来判断是否对样式的修饰 -->
			<!-- v-bind:class="{active:isActive,gree:isGree}" -->
			<!-- 第二种方式，也可以通过元组里面
			调用三目运算的方式进行修饰 -->
			<div class="test" v-bind:class="[isActive?'active':'',isGree?'gree':'']" style="width: 200px;height: 200px;
			text-align: center;line-height: 200px;">hi Vue</div>
			<br />
			<!-- 通过v-bin绑定style样式 -->
			<div :style="{color:color,fontSize:fontsize,
			background:isRed?'red':''}
			">hello Ryan</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isActive: true,
					isGree: true,
					color: "blue",
					fontsize: '30px',
					isRed: false,

				}
			});
		</script>

		<style type="text/css">
			.test {
				font-size: 30px;
			}

			.active {
				background: red;
			}

			.gree {
				color: green;
			}
		</style>
	</body>
</html>