鼠标悬浮及点击选中后背景高亮
:class="active == index ? 'height-style-1' : 'height-style-2'"
"动态绑定样式.
@click="isClick(index)" 通过索取下标
<div class="event" :class="active == index ? 'height-style-1' : 'height-style-2'" @click="isClick(index)" v-for="(item, index) in eventType" :key="index" > <div class="event-type" @click="eventTypeClick(item.value)"> {{ item.label }} </div> </div>
js:代码
trun{
active: 0, //默认0
}
// 背景点击高亮 isClick(index) { this.active = index }
style样式
// 高亮样式
.height-style-1 {
.event-type {
padding: 10px 0px 5px 10px;
font-size: 14px;
font-weight: 200;
margin-bottom: 5px;
background: linear-gradient(to right, #0e74d0, #5053fb);
//悬浮高亮
&:hover {
background: linear-gradient(to right, #0e74d0, #5053fb);
}
}
}
// 默认颜色
.height-style-2 {
.event-type {
background: transparent;
}
}