Vue v-bind動態繫結class例項方法
阿新 • • 發佈:2020-01-16
現在很多網站,都是希望動態切換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",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",baseStyles:{fontSize:"50px",color:"red"},overridingStyles:{"margin-top":"50px"} },})
以上就是本次介紹的全部相關知識點,感謝大家的學習和對我們的支援。