【四二学堂】class与style绑定(vue系列入门示例之十二)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			<div
			    class="test"
				v-bind:class="{active:isActive}"
				style="width:200px;height:200px;text-align:center;line-height:200px">
				hi vue
			</div>
		</div>
		<script type="text/javascript">
			var app=new Vue({
				el: '#app',
				data :{
					message: 'hello Vue!',
					isActive:true
					//isActive:false
				}
			});
		</script>	
		
		<style>
			.test{font-size:60px}
			.active{background-color: red;}
		</style>
		
	</body>
</html>

在这里插入图片描述

发布了402 篇原创文章 · 获赞 48 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_39593940/article/details/105053593
今日推荐