用vue实现div选中效果

Question

Answer 1

// 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 {
    //被选中的样式
}

Answer 2

绑定 class，动态切换就行啦

Answer 3

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

Answer 4

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

handleChoose(id){
this.chooseDiv = id
}

Answer 5

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