vue 动态绑定class和动态绑定style多种用法
一、动态绑定class。可以使用v-bind绑定,如“v-bind:class = ''”,缩写:“:class = ''”。不同形式:1.数组形式(类名必须用''包起来):<div :class="['red', 'font16']">内容</div>2.数组中使用三元表达式:<div :class="['red', 'thin', isactive?'red':'
一、动态绑定class。
可以使用v-bind绑定,如“v-bind:class = ''” ,缩写:“:class = ''”。
不同形式:
1.数组形式(类名必须用''包起来):
<div :class="['red', 'font16']">内容</div>
2.数组中使用三元表达式:
<div :class="['red', 'thin', isactive?'red':'yellow']">内容</div>
说明:如果“isaction”的布尔值为true,那么使用“red”类,否则“yellow”。
3.数组中嵌套对象:
<div :class="['red', 'thin', {'active': isactive}]">内容</div>
说明:“ {'active': isactive}”中的“isactive”的值为true时,那么使用该类。为false就不使用该类。
4.直接使用对象:
<div :class="{red:true, italic:true, active:true, thin:true}">内容</div>
说明:此对象中,键与值一一对应,当前值为true的时候,当前对应的键(也就是类名)就使用,为false就不应用。
不需要动态绑定的类:
<div class="static" :class="{'active':isActive,'error':isError}"></div>
另外,:class可以与普通class共存。
二、动态绑定style。
可以使用v-bind绑定,如“v-bind:style = ''” ,缩写:“:style = ''”。
不同形式:
1.直接用v-bind绑定 :style = '':
<div :style="{color: 'red', 'font-size': '40px'}">这是一个文本</div>
如果对象的键有特殊符号“-”等等,那么要用引号括起来。
2.将样式对象,定义到 data 中,并直接引用到 :style 中
data: { styleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } }
3.如果绑定多个,则写在一个数组中
<div :style='[styleObj1, styleObj2]'>这是一个文本</div>
绑定样式名时,如果写成驼峰命名,则不需要引号,如果是复杂命令,则需要加引号
更多推荐
所有评论(0)