vue中div选中效果
## 定义div和单击事件<template v-for="item in groupList"><divclass="test1":class="item.id==index?'hover':''"@click="groupClick(item.id)">...
·
## 定义div和单击事件
<template v-for="item in groupList">
<div
class="test1"
:class="item.id==index?'hover':''"
@click="groupClick(item.id)"
>
{{item.name}}
</div>
</template>
## 样式和选中后样式
.test1 {
width: 100%;
height: 100%;
background: #41b883;
}
.test1.hover {
border: 2px solid blue;
}
## 获取选中id改变index
groupClick (e) {
this.index = e
}
效果如下,自己可以在hover里面自定义选中后样式
更多推荐
已为社区贡献2条内容
所有评论(0)