現在很多網站,都是希望動態切換class,更換css樣式。下面我們使用Vue的v-bind綁定class
v-bind動態綁定class
對象語法綁定(常用)
red和size的值為true就在class顯示red和size,false就不顯示。下面有兩種寫法:
<style> .red{ color: red; } .size{ font-size: 20px; } </style> <div id="app"> <ul> <!--寫法一--> <li :class="{red:isColor,size:isSize}">{{list}}</li> <!--寫法二,v-bind綁定函數必須加上()--> <li :class="listData()">{{list}}</li> </ul> <!--點擊這個,red的true變false,反之red的false變true--> <button @click="reverse">反選</button> </div> <script> const app=new Vue({ el:"#app", data:{ list:"Vue", isColor:true, isSize:true }, methods:{ reverse:function () { return this.isColor = !this.isColor; }, //寫法二 listData:function () { return {red:this.isColor,size:this.isSize}; } } }) </script>
注意:v-bind:class指令可以與普通的class特性共存;對應的語法糖:“:class”等於v-bind:class
數組語法綁定
數組語法不常用,主要是它不靈活:
<div id="app"> <ul> <!--這里綁定data的變量--> <li :class="[acli,bcli]">{{list}}</li> </ul> </div> const app=new Vue({ el:"#app", data:{ list:"Vue", acli:"aaa", bcli:"bbb", }, })
字符串綁定更數組語法綁定差不多,不常用
<div id="demo"> <span :class="classA"></span> </div> let vm = new Vue({ el:"#demo", data:{ classA:"string" } })
綜合的寫法
<div id="demo"> <span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span> </div> var vm = new Vue({ el:"#demo", data:{ one:"string", classa:true, classb:false } })
v-bind動態綁定style
對象語法綁定(常用)
v-bind:style
的對象語法十分直觀——看着非常像 CSS,但其實是一個 JavaScript 對象。
<div id="app"> <ul> <!--{key(屬性名):value(屬性值)}--> <li :style="{color:color,fontSize:size+'px'}">{{list}}</li> <!--如果你想屬性值原樣數組,就必須加上單引號--> <li :style="{color:'red'}">{{list}}</li> </ul> </div> const app=new Vue({ el:"#app", data:{ list:"Vue", color:"red",
size:50 }, })
注:對象語法的value(屬性值),如果加上單引號就原樣輸出,不加就輸出data的變量值
數組語法綁定
v-bind:style
的數組語法可以將多個樣式對象應用到同一個元素上:
<div v-bind:style="[baseStyles,overridingStyles]">{{list}}</div> const app=new Vue({ el:"#app", data:{ list:"Vue", baseStyles:{fontSize:"50px",color:"red"}, overridingStyles:{"margin-top":"50px"} }, })