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怎么实现点击选中取消切换”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！