Vue框架_class和style的繫結
阿新 • • 發佈：2019-01-12
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue框架學習</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script src="../js/bootstrap.js"></script> <link rel="stylesheet" href="../css/bootstrap.css" /> <style type="text/css"> .class1{ font-size: 20px; } .class2{ background: yellow; } </style> </head> <body> <div id="div1"> <!--使用變數，三目表示式通過操縱變數來動態繫結class--> <p class="default" v-bind:class="isShow?'class1':'class2'">三目表示式_使用class1或class2</p> <!--v-bind:class="{class1,class2:isShow}"不能這樣同時繫結多個class，要分開--> <!--物件方式繫結--> <p class="default" v-bind:class="{class1:isShow,class2:isShow}">物件方式繫結_使用class1和class2</p> <!--陣列方式繫結多個class--> <p class="default" v-bind:class="[whichClass,'class2']">陣列方式繫結_使用class1和class2</p> <button v-on:click="button">按鈕改變isShow的值</button> <hr /> <p v-bind:style="{background:color}">style樣式</p> <p v-bind:style="obj1">style樣式_物件語法</p> <p v-bind:style="[obj1,obj2]">style樣式_陣列語法</p> </div> <script> var vm=new Vue({ el:"#div1",//繫結id物件 data:{//定義屬性物件 isShow:false, whichClass:"class1", color:"green", obj1:{background:"gray",fontSize:"20px"},//font-size改成fontSize obj2:{color:"blue"} }, methods:{//定義函式，可傳參 button:function(){ this.isShow=!this.isShow; } }, }); </script> </body> </html>