vue如何实现点击选中取消切换
更新时间:2022年05月31日 16:49:10 作者:猩猩点点
这篇文章主要介绍了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)
}
}
},以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3+TS项目中eslint、prettier安装配置详细指南
为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下2024-07-07
Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解
在 Vue 3 开发中,经常需要在不同组件或页面之间传递数据,例如从 index 页面获取某个数值(如 cntr、tradeId)后,将其传输到 form 页面进行填写或编辑,本文将介绍几种常见的数据传输方法,并为每种方法提供一个小的 Demo 代码示例,需要的朋友可以参考下2025-02-02


最新评论