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) } } },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
el-select与el-tree结合使用实现树形结构多选框
我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下2022-10-10Vue路由跳转方式区别汇总(push,replace,go)
vue项目中点击router-link标签链接都属于声明式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()。这篇文章主要介绍了Vue路由跳转方式区别汇总(push,replace,go)2022-12-12
最新评论