console 命令行工具 X clear

console

new Vue({
    el: '#app',
    data: {
        message: '菜鸟教程123',
        use: false
    }
})

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Test001.v0.01</title>
	<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js">
	</script>
</head>

<body>
	<h1>你好！</h1>
	<div id="app">
		<div><h1 id="ih1" v-bind:class="{'class1':use}" v-html="'内容：'+message"></h1></div>
        <!-- <p v-bind:class="{'class1': use}"><h1>{{message}}</h1></p> -->
        <input v-model="message">
        <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
        <br><br>
        <div v-bind:class="{'class2': use}">
            测试v-bind:class 指令
        </div>
	</div>

	<script>	
	</script>
</body>

</html>

.class1 {
    background-color: silver;
}

.class2{
    background-color: orangered;
}