m0_46549277
2021-06-04 10:24
采纳率: 76.9%
浏览 221
已采纳

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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 大脑空白想不到id 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>

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 易书生 2021-06-04 10:40

    给你一个思路吧

    点击的时候调用一个方法, 给当前这个选择的项设置一个属性selected, 为true, 在次点击的时候,在把它设置为false, 

    该项动态设置class,根据selected属性

    有一点需要注意的是,你这个是数组,如果开始没有这个属性的话,用$set这个API来设置哦

    评论
    解决 无用
    打赏 举报
  • 大脑空白想不到id 2021-06-04 11:41

    如果是单选框的话,@change="onChange",然后e.target.value获取

    <template>

        <a-row>

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

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

                    {{item}}

                </a-checkbox>

            </a-col>

        </a-row>

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

    </template>

    <script>

    export default {

        data () {

            return {

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

                checkedValues: ''

            }

        },

        methods: {

            onChange (e) {

                this.checkedValues = e.target.value

            },

        },

    };

    </script>

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题