vue中动态绑定多个类名合集

最近遇到了个需求：通过比较修改前后的数据，给修改的数据的元素上面添加高亮块

添加高亮块

.highLight {
    color: pink
}

绑定多个类名实现

<div v-for="(item, index) in listData" :key="index">
    <div
        :class="[compareHighLightFun(item.name, index, 'name'), 'other-class']"
    >
        {{ item.name }}
    </div>
</div>

compareHighLightFun (item, index, name) {
    if (this.beforeData && !this.beforeData[index]) { 
        return 'highLight'
    }
    return item == this.beforeData[index][name] ? 'highLight' : ''
}

动态绑定类名合集

三目运算 形式

<div :class="item.stauts === 1 ? 'active' : ''">11111111</div>

数组 形式

<div :class="[item.stauts === 1 ? 'active' : '', 'wrap']">11111111</div>

// 每个数组项里判断 
<div :class="[
        {item.stauts === 1 ? 'active' : ''},
        {item.apiStatus === 2 ? 'active' : ''},
        'wrap'
    ]"
>11111111</div>

大括号 形式

<div
    :class="{
        'active': item.stauts === 1,
        'active2': item.apiStatus == 2,
        'active3': true
    }"
>11111111</div>

方法 形式

<div :class="compareHighLightFun()">11111111</div>

data里定义

<div :class="activeClass">11111111</div>

export default {
    data() {
        return {
            activeClass: 'active',
        }
    } 
};
<style>
.active {
    color: pink;
}
</style>

对于我们想要的样式，可以通过对组件进行修改activeClass来实现

end

以上方法仅供参考，根据情况来进行使用～

个人总结，欢迎大家指正