练习vue(class,style属性)

<!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>

posted on 2017-12-19 10:57 就酱样Y 阅读(384) 评论(0) 收藏举报