Vue 动态绑定多个class 带上三元运算或其他条件

    技术2022-07-10  133

    动态绑定属性

    在v-for循环中,根据需求,在10条数据里,前3条添加不一样的样式。

    例子

    设置第一条数据的样式为one

    <li v-for="(item,index) in items" :key="index"> <span :class="index==0?'one':''">{{index+1}}</span> </li>

    设置样式并判断

    <li v-for="(item,index) in items" :key="index"> <span :class="[index==0?'one':'','select-active':items.istrue]">{{index+1}}</span> </li>

    实现

    <li v-for="(item,index) in items" :key="index"> <span :class="[index==0?'one':'',index==1?'two':'',index==2?'three':'']">{{index+1}}</span> </li>
    Processed: 0.013, SQL: 9