<!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>
原文：https://www.cnblogs.com/it-taosir/p/9886995.html