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如何给页面增加url前缀

    vue如何给页面增加url前缀

    这篇文章主要介绍了vue如何给页面增加url前缀问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue 父子组件的数据传递、修改和更新方法

    Vue 父子组件的数据传递、修改和更新方法

    下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue实现大屏页面的屏幕自适应

    Vue实现大屏页面的屏幕自适应

    这篇文章主要为大家详细介绍了Vue实现大屏页面的屏幕自适应,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue路由配置方法详细介绍

    Vue路由配置方法详细介绍

    Vue3和Vue2基本差不多,只不过需要将createRouter、createWebHistory从vue-router中引入,再进行使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • Vue代码分割懒加载的实现方法

    Vue代码分割懒加载的实现方法

    这篇文章主要给大家介绍了关于Vue代码分割懒加载的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • el-select与el-tree结合使用实现树形结构多选框

    el-select与el-tree结合使用实现树形结构多选框

    我们在实际开发中需要用到下拉树,elementUI是没有这个组件的,我们就要自己去写了,下面这篇文章主要给大家介绍了关于el-select与el-tree结合使用实现树形结构多选框的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue路由跳转方式区别汇总(push,replace,go)

    Vue路由跳转方式区别汇总(push,replace,go)

    vue项目中点击router-link标签链接都属于声明式导航。vue项目中编程式导航有this.$router.push(),this.$router.replace(),this.$router.go()​​​​​​​。这篇文章主要介绍了Vue路由跳转方式区别汇总(push,replace,go)
    2022-12-12
  • Vue中全局常用的过滤方法解读

    Vue中全局常用的过滤方法解读

    这篇文章主要介绍了Vue中全局常用的过滤方法解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 详解vue项目接入微信JSSDK的坑

    详解vue项目接入微信JSSDK的坑

    这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 导致VUE页面不刷新的问题分析及解决方法

    导致VUE页面不刷新的问题分析及解决方法

    由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的,这篇文章主要介绍了导致VUE页面不刷新的问题分析及解决方法,需要的朋友可以参考下
    2024-04-04

最新评论