1.理解 在应用界面中，某个（些）元素的样式是变化的 class/style绑定是专门用来实现动态样式效果的技术 2.class绑定： ：class=’xxx‘ xxx是字符串 xxx是对象 xxx是数组 3.style绑定 ：style“{color：activeColor,fontSize:fontSize+‘px’}” 其中activeColor/fontSize是data属性
下面是实例CSS代码：
.aClass{ color: red; } .bClass{ color: blue; } .cClass{ font-size: 30px; }简单设置一下字体大小颜色，后面可以通过clss和style绑定可以实现更新变换字体大小与颜色，下面是完整代码：
<div id="demo"> <h2>1.clss绑定: :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 type="text/javascript"> new Vue({ el:'#demo', 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>下面是效果图，当点击更新按钮时，相应的文本字体大小，颜色会发生改变。
先总结这些了，小白养成ing~~
