VUE：class與style強制綁定
阿新 • • 發佈：2018-11-01
eth ava 更新 界面 utf-8 new charset set 就是
<!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>
VUE：class與style強制綁定