Vue中 动态添加class写法 动态静态clas混合

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前面要加: 修饰符！