本篇内容主要讲解“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);
},
在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怎么实现点击选中取消切换”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
