VUE：class與style強制繫結
阿新 • • 發佈：2018-11-01
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .aClass{ color:red; } .bClass{ color:blue; } .cClass{ font-size: 30px; } </style> </head> <body> <!-- 1.理解 在應用介面中，某個（些）元素的樣式是變化的 class/style繫結就是專門用來實現動態樣式效果的技術 2.class繫結：class='xxx' xxx是字串 xxx是物件 xxx是陣列 3.style繫結 :style="{color: activeColor,fontSize: fontSize+'px'}" 其中activiColor/fontSize是data屬性--> <div id="app"> <h2>1.class繫結：：class='xxx'</h2> <p class="cClass" :class="a">xxx是字串</p> <p :class="{aClass:isA,bClass:isB}">xxx是物件</p> <p :class="['aClass','cClass']">xxx是陣列</p> <h2>2.style繫結</h2> <p :style="{color: activeColor,fontSize: fontSize+'px'}">:style="{color: activeColor,fontSize: fontSize+'px'}"</p> <button @click="update">更新</button> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:"#app", data:{ a:'aClass', isA:true, isB:false, activeColor:'red', fontSize:20 }, methods:{ update(){ this.a='bClass', this.isA=false, this.isB=true, this.activeColor='green'; this.fontSize=30 } } }) </script> </body> </html>