樣式綁定v-bind
操作元素的 class清單和内聯樣式是資料綁定的一個常見需求。因為它們都是屬性，是以我們可以用
v-bind
處理它們：隻需要通過表達式計算出字元串結果即可。不過，字元串拼接麻煩且易錯。是以，在将
v-bind
用于
class
和
style
時，Vue.js做了專門的增強。表達式結果的類型除了字元串之外，還可以是對象或數組。
v-bind:style
| <!-- 格式v-bind:style="{ key:value }" --> <!-- 格式v-bind:style="[dataStyle0,dataStyle1]" --> <!-- 樣式屬性不添加''，将縮寫為java駝峰命名變量 'font-size' >>> fontSize --> <div style="height: 180px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-bind:style="{ key:value }"</div> <hr /> <div> <div v-bind:style="{ color:colorVar , fontSize:fontVar + 'px'}"> Name </div> <div v-bind:style="[dataStyle0,dataStyle1]"> Name </div> </div> </div> |
v-bind:class
| <!-- 格式v-bind:class="{ clazzStyle , isBind }" --> <!-- 格式v-bind:class="clazzObject" ,obj包含需要綁定的樣式 --> <!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定義在data的樣式對象 --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-bind指令示例(class)</div> <hr /> <div> <div v-bind:class="{ style0 : isBind ,style1:true}"> Name </div> <div v-bind:class="clazzObj"> Name </div> <div v-bind:class="cssClazz"> Name </div> </div> </div> |
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
<title>HelloDemo</title>
</head>
<body style="height: 100%;">
<style>
.style0{
font-size: 25px;
color: green;
}
.style1{
background: gold;
}
</style>
<!--
VUE指令v-bind樣式綁定指令
REF:
http://www.runoob.com/vue2/vue-class-style.html
https://cn.vuejs.org/v2/guide/class-and-style.html
-->
<div id="appVue">
<!-- 格式v-bind:class="{ clazzStyle , boolean表達式 }" -->
<div style="height: 200px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.v-bind條件渲染(value,key,index)</div>
<hr />
<div>
<div v-bind:class="{style0: 5 > 1}">
Name
</div>
</div>
</div>
<!-- 格式v-bind:style="{ key:value }" -->
<!-- 格式v-bind:style="[dataStyle0,dataStyle1]" -->
<!-- 樣式屬性不添加''，将縮寫為java駝峰命名變量 'font-size' >>> fontSize -->
<div style="height: 180px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.v-bind:style="{ key:value }"</div>
<hr />
<div>
<div v-bind:style="{ color:colorVar , fontSize:fontVar + 'px'}">
Name
</div>
<div v-bind:style="[dataStyle0,dataStyle1]">
Name
</div>
</div>
</div>
<!-- 格式v-bind:class="{ clazzStyle , isBind }" -->
<!-- 格式v-bind:class="clazzObject" ,obj包含需要綁定的樣式 -->
<!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定義在data的樣式對象 -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.v-bind指令示例(class)</div>
<hr />
<div>
<div v-bind:class="{ style0 : isBind ,style1:true}">
Name
</div>
<div v-bind:class="clazzObj">
Name
</div>
<div v-bind:class="cssClazz">
Name
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#appVue",
data: {
cssClazz:'style1',
clazzObj:{
'style0':true
},
colorVar:'green',
fontVar:25,
isBind:true,
dataStyle0:{
'color':'red',
'font-size':'30px'
},
dataStyle1:{
fontWeight:'bold'
}
}
}
)
</script>
</body>
</html>
REF:
http://www.runoob.com/vue2/vue-class-style.html
https://cn.vuejs.org/v2/guide/class-and-style.html
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)