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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。