vue如何实现点击选中取消切换

这篇文章主要介绍了vue实现点击选中取消切换，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue点击选中取消切换

html

{{item.name}}

data

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

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。

以上就是vue如何实现点击选中取消切换的详细内容，更多请关注0133技术站其它相关文章！