Vue中 动态添加class写法 动态静态clas混合
Vue中 动态添加class写法 动态静态clas混合示例//fx,cont-block为静态classob为动态class<div :class="[ 'fx','cont-block',{ob : index == '0'}]" v-for="(item,index) in objData" @click="changeStatus"><div class="blocktit
·
Vue中 动态添加class写法 动态静态clas混合
示例
//fx,cont-block为静态class ob为动态class
<div :class="[ 'fx','cont-block',{'ob' : index == '0'}]" v-for="(item,index) in objData" @click="changeStatus">
<div class="blocktitle">{{item.name}}
<span :class="['iconfont', item.iconClass]"></span>
</div>
<div class="p-radio">
<div class="p-radio-block"></div>
</div>
</div>
//三目运算
:class="['info-block' ,index == 3 ? 'afterborder' :'']"
分析
在有多个class,需要静态动态混合使用时,可以将class写为数组。静态的引号引起来表示为静态,动态的可以用大括号括起来,里面可以写表达式,表达式的写法要注意,多个class之间用逗号分隔。另外class前面要加: 修饰符!
更多推荐
已为社区贡献12条内容
所有评论(0)