用vue实现div选中效果

• Z时代
• 2024-01-10
• 分类：技术分享

回答

// template
<div v-for="item in list" :key="item.key" :class="{'active': activeKey === item.key}" @click="handleClick(item.key)"></div>
// js
handleClick(key) {
    this.activeKey = key;
}
// css
.active {
    //被选中的样式
}

绑定 class，动态切换就行啦

:class="{ red:changeRed == index}" @click="reds(index)"

你可以先写好一套选中之后的class,.active{}你的这个主要是，color，border，和background，然后在六个div上分别添加 :class="{'active':chooseDiv==1}" 和@click='handleChoose(1)'
从第一个到第六个数字依次为 1到6
在data中添加 chooseDiv：0,
在methods中添加

handleChoose(id){
this.chooseDiv = id
}

设置个activeId,绑定点击事件切换activeid，根据activeid判断加不加样式

以上是 用vue实现div选中效果 的全部内容， 来源链接： utcz.com/a/74295.html