vue实现div选中与取消选中,多个选一个的两种方式

新晋程序媛一枚,整理整理思路
当我们项目场景里通常会遇到如:三个图标仅可以同时选中一个,或者一个按钮点击选中;再次点击取消选中。

1、三个图标仅可以同时选中一个
在这里插入图片描述

HTML:

<div>
        <div>
          <div class="font" :class="{oneChecked:choose==='one',
          oneUnChecked:choose!=='one'}" @click="clickPic('one')">1</div>
          <div class="picture" :class="{pictureChecked:choose==='one',
          pictureUnChecked:choose!=='one'}" @click="clickPic('satellite')"></div>
        </div>
        <div>
          <div class="font" :class="{twoChecked:choose==='two',
          twoUnChecked:choose!=='two'}" @click="clickPic('two')">2</div>
          <div class="picture" :class="{pictureChecked:choose==='two',
          pictureUnChecked:choose!=='two'}" @click="clickPic('two')"></div>
        </div>
        <div>
          <div class="font" :class="{threeChecked:choose==='three',
          threeUnChecked:choose!=='three'}" @click="clickPic('three')">3</div>
          <div class="picture" :class="{pictureChecked:choose==='three',
          pictureUnChecked:choose!=='three'}" @click="clickPic('three')"></div>
        </div>
      </div>

SCRIPT:

data() {
    return {
      choose:'',
    };
  },
  methods: {
    clickPic(index){
        this.choose = index;
    }
  },

2、一个按钮点击选中;再次点击取消选中
在这里插入图片描述

HTML:

<div class="onePicture picture" :class="{oneChecked:chooseCorrect===true,
          onePicture:chooseCorrect!==false}" @click="clickCorrect">
            <div v-show="chooseCorrect" class="correct"></div>

SCRIPT:

data() {
    return {
      chooseCorrect:false,
    };
  },
  methods: {
    clickCorrect(){
      this.chooseCorrect = !this.chooseCorrect;
    }
  },
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值