<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js"></script>
<title>Class與Style綁定</title>
<style type="text/css">
.classA {
/*紅色字體*/
color: red;
}
.classB {
/*斜體*/
font-style: italic;
}
.classC {
/*藍紫色字體*/
color: blueviolet;
}
.classD {
/*添加padding、margin*/
margin: 5px;
padding: 5px;
}
.classE {
/*邊框*/
border: 1px solid saddlebrown;
}
.classF {
/*背景色*/
background-color: lightgoldenrodyellow;
}
.drTransform {
transform: rotate(7deg);
-ms-transform: rotate(7deg);
/* IE 9 */
-moz-transform: rotate(7deg);
/* Firefox */
-webkit-transform: rotate(7deg);
/* Safari 和 Chrome */
-o-transform: rotate(7deg);
transition-duration: 5s;
}
</style>
</head>
<body>
<h2>綁定Html Class</h2>
<p>盡管可以用 Mustache 標簽綁定 class，比如 class="{{ className }}"，但是不推薦這種寫法和 v-bind:class 混用。兩者只能選其一！</p>
<div id="dr01">
<h4>#對象語法</h4>
<p>給v-bind:class一個對象，通過true、false動態切換class，isA為false，true，所以div的class為static、classB</p>
<!-- 下面是兩種方式，一種直接在v-bind:class里面展示對象，另外一種，在data里面添加classObj屬性，在v-bind:class里面賦值classObj對象 -->
<div v-bind:class="{static:isStatic,classA:isA,classB:isB}">1、對象語法class test</div>
<div v-bind:class="classObj">2、對象語法another class attribute bind</div>
</div>
<hr />
<div id="dr02">
<h4>#數組語法</h4>
<div v-bind:class='["classC","classD","classE","classF"]'>1、數組語法，直接添加"className"，不能動態更改，與class="classC classD classE classF"保持一致</div>
<div v-bind:class='["classC","classD",isE?"classE":"","classF"]'>1、數組語法，直接添加"className"，里面使用了三元表達式</div>
<div v-bind:class='[drClassC,drClassD,drClassE,drClassF]'>2、數組語法，數組的元素在data里面有定義，挨個賦值className</div>
<div v-bind:class='[drClassC,drClassD,drClassE,isF?drClassF:""]'>3、數組語法，里面使用了三元表達式</div>
<hr />
<h4>#對象語法、數組語法混合使用</h4>
<div>
<p>在 1.0.19+ 中，可以在數組語法中使用對象語法：{{cHtml}}</p>
<span>classA: data定義（三元表達式）, classB:直接引用（三元表達式），classC:data引用，classD：直接引用，EFGH是對象屬性，所以不論屬性名稱是否有引號，只要屬性值在data里面定義的是true，引用的都是屬性名，false不引用</span>
<div v-bind:class='[isA?drClassA:"",isB?"classB":"",drClassC,"classD",{"classE":isE,drClassF:isF,"classG":isG,drClassH:isH}]'>
class屬性綜合測試
</div>
</div>
</div>
<hr />
<h2>綁定內聯樣式</h2>
<div id="dr03">
<h4>#對象語法</h4>
<div v-bind:style="{color:activeColor,fontSize:activeFontSize}">1、對象語法簡單測試</div>
<div v-bind:style="styleObj">2、對象語法（在data下定義）</div>
</div>
<div id="dr04">
<h4>#數組語法</h4>
<div v-bind:style="[{color:'blue',fontSize:'15px'},{fontStyle:'italic',backgroundColor:'lightgoldenrodyellow'}]">2、數組語法簡單測試</div>
<div v-bind:style="[styleObj01,styleObj02]">2、數組語法簡單測試</div>
</div>
<script>
var dr01 = new Vue({
el: "#dr01",
data: {
isStatic: true,
isA: true,
isB: true,
classObj: {
static: true,
classA: true,
classB: true,
}
}
});
var dr02 = new Vue({
el: "#dr02",
data: {
isA: true,
isB: true,
isE: true,
isF: true,
isG: true,
isH: true,
drClassA: "classA",
drClassB: "classB",
drClassC: "classC",
drClassD: "classD",
drClassE: "classE",
drClassF: "classF",
drClassG: "classG",
drClassH: "classH",
cHtml: '<div v-bind:class="[classA, { classB: isB, classC: isC }]">'
}
});
var dr03 = new Vue({
el: "#dr03",
data: {
activeColor: "#ff0000",
activeFontSize: "20px",
styleObj: {
color: "red",
fontSize: "20px"
}
}
});
var dr04 = new Vue({
el: "#dr04",
data: {
styleObj01: {
color: "blue",
fontSize: "15px"
},
styleObj02: {
fontStyle: "italic",
backgroundColor: "lightgoldenrodyellow"
}
}
});
</script>
</body>
</html>
