vue 勾选v-for循环渲染的div

Question

点击一个实现单选或多个div实现多选右上角出现打钩的图标，再返回id需要怎么实现

<template>
  <div style="margin: 0 150px">
    <a-row :gutter="[16,16]">
      <a-col :span="6" v-for="csName in clasData">
        <a-checkbox style="width: 300px">
          <div class="pat-wrap" >
            <!--            背景图部分-->
            <div>
              <img class="pat-img">
            </div>
            <!--            遮罩部分-->
            <a-row class="pat-shade" >
              <a-col :span="24">
                <p>{{csName.name}}</p>
              </a-col>

              <a-col :span="24">
                <div >
                  <div class="pat-shade-div" v-for="cName in classData">
                    <IconFont type="iconjiantou1"></IconFont>
                    <p>{{cName.name}}</p>
                  </div>
                </div>
              </a-col>

              <a-col :span="24">
                <div class="pat-shade-div" style="width: 45%">
                  <p>50-500人</p>
                </div>
                <div class="pat-shade-div" style="width: 45%">
                  <p>已选：3人</p>
                </div>
              </a-col>

              <a-col :span="24">
                <div style="color: #17C295;display: inline-block;margin-right: 10px">查看</div>|
                <div style="color: #0098F8;display: inline-block;margin-left: 10px;margin-right: 10px" >编辑</div>|
                <div style="color: #FC8950;display: inline-block;margin-left: 10px;">删除</div>
              </a-col>

            </a-row>

          </div>
        </a-checkbox>

      </a-col>
    </a-row>
  </div>
</template>
<script>
export default{
  data(){
    return{
      classData: [
        { id: 1, name: '测试' },
        { id: 2, name: '测试' },
        { id: 3, name: '测试' },
        { id: 4, name: '测试' },
        { id: 5, name: '测试' },
        { id: 6, name: '测试' },
      ],
      clasData: [
        { id: 1, name: '模式一' },
        { id: 2, name: '模式二' },
        { id: 3, name: '模式三' },
        { id: 4, name: '模式四' },
        { id: 5, name: '模式五' },
        { id: 6, name: '模式六' }
      ],
    }
  }
}
</script>
<style>
.pat-div-img{
  width: 30%;
  height: 150px;
  background-color: antiquewhite;
}
.pat-img{
  width: 100%;
  height: 180px;
  z-index: 1;
}
.pat-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.pat-shade {
  position: absolute;
  width: 100%;
  bottom: -35px;
  height: 120px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: bottom ease-out .2s;
  color: #FFFFFF;
  text-align: center;
}
.pat-wrap:hover .pat-shade {
  bottom: 0;
}
.pat-shade IconFont{
  display: inline-block;
}
.pat-shade p{
  display: inline-block;
  margin-bottom: 0;
}
.pat-shade-div{
  display: inline-block;
  margin: 0 5px;
}
</style>

Answer 1

<template>

    <a-checkbox-group @change="onChange">

        <a-row>

            <a-col :span="8" v-for="(item,index) in testarr" :key="index+1">

                <a-checkbox :value="index+1">

                    {{item}}

                </a-checkbox>

            </a-col>

        </a-row>

    </a-checkbox-group>

    <h1>{{checkedValues}}</h1>

</template>

<script>

export default {

    data () {

        return {

            testarr: ['a', 'b', 'c', 'd', 'e'],

            checkedValues: ''

        }

    },

    methods: {

        onChange (checkedValues) {

            this.checkedValues = checkedValues.sort((a, b) => a - b)

        },

    },

};

</script>