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

viva20

已于 2022-08-03 17:00:12 修改

阅读量3.2k

点赞数 1

分类专栏： vs开发文章标签： vue.js 前端 javascript

于 2022-08-03 16:58:08 首次发布

本文链接：https://blog.csdn.net/viva20/article/details/126143415

版权

vs开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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;
    }
  },