VUE指令-樣式繫結v-bind
樣式繫結v-bind
操作元素的 class列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用v-bind處理它們：只需要通過表示式計算出字串結果即可。不過，字串拼接麻煩且易錯。因此，在將v-bind用於class和style時，Vue.js做了專門的增強。表示式結果的型別除了字串之外，還可以是物件或陣列。
v-bind:style
|
<!-- 格式v-bind:style="{ key:value }" --> <!-- 格式v-bind:style="[dataStyle0,dataStyle1]" --> <!-- 樣式屬性不新增''，將縮寫為 <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