<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>练习vue(class,style属性)</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/vue.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
window.onload = function() {
let vm = new Vue({
el: "#itany",
data: {
bb: 'aa',
dd: 'cc'
}
});
}
</script>
<style>
.aa {
color: red;
font-size: 20px;
} .cc {
background-color: #ccc;
}
</style>
</head> <body>
<div id="itany">
<!--<p v-bind:class="aa">今天天气真棒！</p>-->
<!--<p :class="aa">今天天气真棒！</p>-->
<!--方式1：变量形式-->
<!--<p v-bind:class="bb">今天天气真棒！</p>-->
<!--方式2：数组形式-->
<!--<p v-bind:class="[bb,dd]">今天天气真棒！</p>-->
<!--方式3：json形式
<p v-bind:class="{aa:true}">今天天气真棒！</p>-->
</div> </body> </html>