vue项目中动态绑定样式

一、需求

需要在一个vue项目中实现动态绑定样式。比如出现在tab切换时。

二、解决方法

2.1 方法一

<div class="filterTop" v-for="(itemTop,indexTop) in arrayFilter" :key="indexTop" @click="FilterTop(indexTop)" :class="{pick:pickFilter == indexTop}">
    {{itemTop}}
</div>

.pick {
    background-color: #2C5AA7;
}

当pickFilter == indexTop这个条件满足时，就会启用样式.pick。

2.2 方法二

<div :class="pickTab == 0 ? 'tabPick_b' : 'tabPick_a'" @click="pickTab = 0">
    回答求助
    <div></div>
</div>
<div :class="pickTab == 1 ? 'tabPick_b' : 'tabPick_a'" @click="pickTab = 1">技术干货</div>

.tabPick_a {
    color: #232323;
}    
.tabPick_b {
    color: #2C5AA7;
}