vue怎么實現點擊選中取消切換

本篇內容主要講解“vue怎么實現點擊選中取消切換”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么實現點擊選中取消切換”吧!

vue點擊選中取消切換

html

<el-button @click="searchStatisticsInfo(item)" :class="item.isChoose == true ? 'active' : ''" size="small" v-for="(item,index) in menulist" :key="index">{{item.name}}</el-button>

data 

menulist: [{
  id: 1,
    isChoose: true,
    name: '今天'
  }, {
    id: 2,
    isChoose: false,
    name: '近七天'
  }, {
    id: 3,
    isChoose: false,
    name: '近30天'
  }, {
    id: 4,
    isChoose: false,
    name: '近90天'
  }],

JS

  methods: {
    searchStatisticsInfo (item) {
      for (let item of this.menulist) {
        item.isChoose = false;
      }
      item.isChoose = !item.isChoose;
    }
 }

如果數組中不包含isChoose 則需要改成$set的方式。

 searchStatisticsInfo (item) {
      for (let row of this.menulist) {
        this.$set(row, "isChoose", false);
      }
      this.$set(item, "isChoose", true);
    },

vue點擊選中,再次點擊取消

舉個栗子

在el-calendar中單擊選中，再次點擊取消選中

可以定義一個變量，用他的值作為判斷，如果與點擊日期相等，就是取消選中

// 點擊查詢當天記錄
    handleHoliday(date, data) {
      const { day } = data;
      if (this.clickTime === day) {      //定義變量clickTime
        this.findWorkList(this.currentDate);
        this.findList(this.currentDate);
        this.clickTime = "";   //再次賦值為空，才能連續點擊
        return;
      } else {
        this.clickTime = day;     //不可用date做比較，date是變化的值
          this.findWorkList(this.currentDate, day);
          this.findList(this.currentDate, day)
        }
      }
    },

到此，相信大家對“vue怎么實現點擊選中取消切換”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！