Ins is selected or not, and ins is false assuming it is not selected
<template> <div> <div class="list"> <p v-for="(item,inx) in list" :key="inx" @click="listBtn(inx)" :class="item.ins? 'back':''" >{{item.name}}</p> </div> </div> </template> <script> export default { data() { return { list: [ { name: "Zhang", id: 1, ins: false}, {name: "bill", id: 2, ins: false}, {name: "liu", id: 3, ins: false}], xzid: ""}; }, methods: { listBtn(e) { let list = this.list; If (list[e].ins) {list[e].ins = false; } else {//for for (let I in list) {list[I].ins = false; } list[e].ins = true; } let indx = list.map(item => item.ins).indexof (true); if (indx ! = -1) { this.xzid = list[e].id; }else{ this.xzid='' } }, }, }; </script> <style scoped> p { width: 100px; height: 50px; border: 1px solid #9999; display: flex; align-items: center; justify-content: center; cursor: pointer; } .list { display: flex; justify-content: space-around; width: 400px; margin: 0 auto; } .back { background-color: red; color: #fff; } </style>Copy the code