vue
/
Vue


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!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>
	<style>
		.class1 {
			background: #444;
			color: #eee;
		}
	</style>

	<body>
		<div id="app">
			<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
			<br><br>
			
			<div v-bind:class="{'class1': use}">
				v-bind:class 指令
			</div>
			
			<div :class="{'class1': use}">
				v-bind:class 指令
			</div>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					use: false
				}
			});
		</script>
	</body>

</html>