给数据选中状态加颜色，并且获取选中的值

ins为是否选中，ins为false假设为未选中

    <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: "张三",
              id: 1,
              ins: false
            },
            {
              name: "李四",
              id: 2,
              ins: false
            },
            {
              name: "小刘",
              id: 3,
              ins: false
            }
          ],
          xzid: ""
        };
      },
      methods: {
        listBtn(e) {
          let list = this.list;
         //这里的条件if是起到判断是否为选中的状态
          if (list[e].ins) {
            list[e].ins = false;
          } else {
          //for相当于重置，用于当取消自己时操作
            for (let i in list) {
              list[i].ins = false;
            }
            list[e].ins = true;
          }
          //查找当前是否有包含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>