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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE axios每次请求添加时间戳问题

    VUE axios每次请求添加时间戳问题

    这篇文章主要介绍了VUE axios每次请求添加时间戳问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 详解vue2父组件传递props异步数据到子组件的问题

    详解vue2父组件传递props异步数据到子组件的问题

    本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 使用Element+vue实现开始与结束时间限制

    使用Element+vue实现开始与结束时间限制

    这篇文章主要为大家详细介绍了使用Element+vue实现开始与结束时间限制,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue的事件响应式进度条组件实例详解

    Vue的事件响应式进度条组件实例详解

    这篇文章主要介绍了Vue的事件响应式进度条组件的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • 详解vue项目中实现图片裁剪功能

    详解vue项目中实现图片裁剪功能

    这篇文章主要介绍了vue项目中实现图片裁剪功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue在body和query中如何向后端传参

    vue在body和query中如何向后端传参

    这篇文章主要介绍了vue在body和query中如何向后端传参,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • :visible.sync 的作用详解

    :visible.sync 的作用详解

    我们在前端开发中经常看到:visible.sync这种修饰符,很多人不知道这是干什么的,在使用ElementUI的时候,里面有个弹窗el-dialog组件的时候会有用到:visible.sync,今天小编带领大家学习下:visible.sync 的作用,感兴趣的朋友一起看看吧
    2022-11-11
  • Vue3+TS项目中eslint、prettier安装配置详细指南

    Vue3+TS项目中eslint、prettier安装配置详细指南

    为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下
    2024-07-07
  • Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解

    Vue3中从一个页面(index)传输数值到另一个页面(form)的方法详解

    在 Vue 3 开发中,经常需要在不同组件或页面之间传递数据,例如从 index 页面获取某个数值(如 cntr、tradeId)后,将其传输到 form 页面进行填写或编辑,本文将介绍几种常见的数据传输方法,并为每种方法提供一个小的 Demo 代码示例,需要的朋友可以参考下
    2025-02-02
  • Vue组件基础操作介绍

    Vue组件基础操作介绍

    这篇文章主要介绍了Vue组件基础操作,组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用
    2023-01-01

最新评论