vue
/
Vue


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940
							<!DOCTYPE html>
<html lang="zh">

	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<link href="../css/style.css" rel="stylesheet"> </head>

	<body>
		<style>
			.active {
				width: 100px;
				height: 100px;
				background: green;
			}
		</style>
		<div id="myApp">
			<div v-bind:class="{ active: isActive }">红色文本1</div>
			<div :class="{ active: !isActive }">红色文本2</div>
			
			<button @click="btnClick">改变class吧</button>
		</div>
		<script>
			var myApp = new Vue({
				el: '#myApp',
				data: {
					isActive: true
				},
				methods: {
					btnClick: function() {
						this.isActive = !this.isActive;
					},
				},
			});
		</script>
	</body>

</html>