一、需求
需要在一个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;
}