Vue Class 与 style 动态绑定

出自：https://learning.dcloud.io/#/?vid=7

1，对象形式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="app">
			<div 
			class="test"
			v-bind:class="{active : isActive,green:isGreen}" 
			style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
				hi vue
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isActive: true,
					isGreen:false
				}

			})
		</script>
		<style>
			.active {background: #FF0000;}
			.green{color: #00FF00;}
			.test{font-size: 30px;}
		</style>
	</body>
</html>

2，数组形式绑定 , 包括三元运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="app">
			<div 
			class="test"
			v-bind:class="[ isActive ? 'active':'', isGreen ? 'Green':'']" 
			style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
				hi vue
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isActive: true,
					isGreen:true
				}

			})
		</script>
		<style>
			.active {background: #FF0000;}
			.Green{color: #00FF00;}
			.test{font-size: 30px;}
		</style>
	</body>
</html>

3， style 样式的绑定，以及三元运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

		<div id="app">
			<div 
			class="test"
			v-bind:class="[ isActive ? 'active':'', isGreen ? 'Green':'']" 
			style="width: 200px; height: 200px; text-align: center; line-height: 200px;">
				hi vue
			</div>
			
			
			<div
			:style="{color:color, fontSize:size, background:isRed?color:''}"
			>
			hi vue	
			</div>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isActive: true,
					isGreen:true,
					color:'#FF0000',
					size:'50px',
					isRed:false
				}

			})
		</script>
		<style>
			.active {background: #FF0000;}
			.Green{color: #00FF00;}
			.test{font-size: 30px;}
		</style>
	</body>
</html>

来源：CSDN

作者：nicepainkiller

链接：https://blog.csdn.net/nicepainkiller/article/details/103461161

标签

动态

class