标签:vue 写法 属性 col 样式 str 字符 class bin
1、布尔值的绑定方式
<div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB}"></span> </div> var vm = new Vue({ el:"#demo", data:{ isA: true, isB: true } })
2、变量的绑定方式
<div id="demo"> <span :class=[classA,classB]></span> </div> var vm = new Vue({ el:"#demo", data:{ classA:"class-a", classB:"class-b" } })
3、字符串绑定方式
<div id="demo"> <span :class="classA"></span> </div> var vm = new Vue({ el:"#demo", data:{ classA:"string" } })
4、三目运算
<div id="demo"> <p :class="isclass?classC:classD"></p> </div> var vm = new Vue({ el:"#demo", data:{ classC:"C", classD:"D", isclass:true } })
5、综合的写法
<div id="demo"> <span :class="[one,{‘classA‘:classa,‘classB‘:classb}]"></span> </div> var vm = new Vue({ el:"#demo", data:{ one:"string", classa:true, classb:false } })
标签:vue 写法 属性 col 样式 str 字符 class bin
原文地址:https://www.cnblogs.com/cyh-blogs/p/11858239.html