練習vue(class,style屬性)

時間 2019-11-08

標籤練習 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>

相關標籤/搜索