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]" --> <!-- 樣式屬性不添加‘‘，將縮寫為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>View Code
REF:
http://www.runoob.com/vue2/vue-class-style.html
https://cn.vuejs.org/v2/guide/class-and-style.html
VUE指令-樣式綁定v-bind