一、动态绑定:
1)<div v-bind:class="{'class1': boolean}">v-bind:class 指令</div>
//多参数::class={'class1':true,'class2':true}
2)<div :class="class1"></div>
//多参数:<div :class="[class1,class2]"></div>
二、computed:
1)<div :class="divClasses"></div>
2)<div :style="divClasses"></div>
new Vue({ el:'#app', data:{ b:true }, computed:{ divClasses:function () { //返回一个json对象; return{ class1:this.b, class2:this.b } } } })
三、双向绑定方式:
<div :class="divClasses"></div>
四、内联样式:
扫描二维码关注公众号,回复:
6634387 查看本文章
<div :style="{backgroundColor:red}"></div>
//1)必须有大括号,json格式;2)多单词,后面的单词去掉-变为大写;
//多参数:<div :style="{height: '100px',width: '100px',backgroundColor:'red'}"></div>
//多参数数组:<div :style="[{height: '100px'},{width: '100px'},{backgroundColor:'red'}]"></div>