「已注销」 2021-06-04 10:24 采纳率: 71.4%
浏览 558
已采纳

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

点击一个实现单选或多个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>
  • 写回答

2条回答 默认 最新

  • 永远不会太晚 2021-06-04 11:01
    关注

    <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>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
  • ¥15 网上下载的3DMAX模型,不显示贴图怎么办
  • ¥15 关于#stm32#的问题:寻找一块开发版,作为智能化割草机的控制模块和树莓派主板相连,要求:最低可控制 3 个电机(两个驱动电机,1 个割草电机),其次可以与树莓派主板相连电机照片如下:
  • ¥15 Mac(标签-IDE|关键词-File) idea
  • ¥15 潜在扩散模型的Unet特征提取
  • ¥15 iscsi服务无法访问,如何解决?
  • ¥15 感应式传感器制作的感应式讯响器