遍历生成列表选中改变样式

问题来源：

在实际开发过程中，我们很多时候使用的列表都是v-for遍历渲染的，可能是几条，也可能成百上千条了列表，这样我们就需要做一个点击选中改变所选中的那一条列表的样式(如：背景色，文字颜色等)

解决方法：

依旧使用class或者id选中器，通过一个三目判断是否选中来使用不一样的样式，如下，通过点击事件把当前点击的'i'赋值给index,同时通过函数bgc来判断是否选中返回一个布尔值，再通过三目运算来赋予相应的类名

代码：

HTML

 <div class="list">
        <div class="listOne" v-for="(v,i) in data1" :key="i" @click="clickCkeck(v,i)" :class="bgc(i)?'listOneChecked':'listOne'">{{ v.name }}</div>
    </div>

CSS

.listOne{
    width: 100%;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}
.listOne:hover{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #474747;
}
.listOneChecked{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #6b6b6b;
}

JS

const clickCkeck=(v:any,i:any)=>{
    console.log(v);
    value1.value=v.name
    index.value=i
}
const bgc=(i:any)=>{
    if(i==index.value){
        return true
    }
    else{
        return false
    }
}