vue.js一个简单例子的基础说明系列-[第4个例子]-----这个例子.我还是不明白这个例子.我还是不明白它是怎么vu

这个例子.我还是不明白

它是怎么vue去改变dom层

在浏览器控制台可以看到操作是它的dom层的变化

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	</head>
	<style>
		.class1 {
			background: #444;
			color: #eee;
		}
	</style>

	<body>
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

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

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

</html>