返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何实现点击选中取消切换
  • 688
分享到

vue如何实现点击选中取消切换

2024-04-02 19:04:59 688人浏览 泡泡鱼
摘要

目录Vue点击选中取消切换vue点击选中,再次点击取消举个栗子vue点击选中取消切换 html <el-button @click="searchStatisticsInfo(

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue如何实现点击选中取消切换

本文链接: https://lsjlt.com/news/150281.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何实现点击选中取消切换
    目录vue点击选中取消切换vue点击选中,再次点击取消举个栗子vue点击选中取消切换 html <el-button @click="searchStatisticsInfo(...
    99+
    2024-04-02
  • vue怎么实现点击选中取消切换
    本篇内容主要讲解“vue怎么实现点击选中取消切换”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么实现点击选中取消切换”吧!vue点击选中取消切换html<el-button&nbs...
    99+
    2023-06-30
  • vue中如何实现选项卡点击切换且能滑动切换功能
    这篇文章主要介绍vue中如何实现选项卡点击切换且能滑动切换功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所述: <div>  &nbs...
    99+
    2024-04-02
  • vue如何实现点击切换页面
    本篇内容介绍了“vue如何实现点击切换页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!vue实现点击切换页面的方法:1、注册一个组件,并在...
    99+
    2023-07-04
  • vue中怎么实现点击切换页面
    本教程操作环境:windows7系统、vue3、Dell G3电脑。vue中怎么实现点击切换页面?Vue案例--点击按钮切换页面用vue的方式做一个切换页面的效果。思路:注册一个组件,并在父元素中使用。使用v-if 和 v-else 来控制...
    99+
    2022-11-22
    Vue
  • html5如何实现点击切换文本
    这篇文章主要为大家展示了“html5如何实现点击切换文本”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5如何实现点击切换文本”这篇文章吧。 ...
    99+
    2024-04-02
  • jQuery如何实现radio第一次点击选中第二次点击取消功能
    这篇文章主要为大家展示了“jQuery如何实现radio第一次点击选中第二次点击取消功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现rad...
    99+
    2024-04-02
  • vue+js点击箭头实现图片切换
    本文实例为大家分享了vue+js点击箭头实现图片切换的具体代码,供大家参考,具体内容如下 前端需求是 返回的图片数据能够点击箭头切换 代码如下 <div class="...
    99+
    2024-04-02
  • Vue如何实现点击按钮进行上下页切换
    这篇文章给大家介绍Vue如何实现点击按钮进行上下页切换,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。案例效果:完整代码如下: <template>  <div ...
    99+
    2023-06-29
  • JavaScript实现Tab点击切换
    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 Jquery 来实现 Tab 点击切换...
    99+
    2024-04-02
  • vue如何实现点击按钮切换背景颜色的效果
    不懂vue如何实现点击按钮切换背景颜色的效果?其实想解决这个问题也不难,下面让小编带着大家一起学习怎么去解决,希望大家阅读完这篇文章后大所收获。用vue简单的实现点击按钮切换背景颜色,具体代码如下所示:<div class="...
    99+
    2023-05-30
  • javascript实现点击图片切换
    点击实现图片切换效果在生活中非常的常见,恰巧今天的练习也是做一个图片的切换效果。供大家参考: HTML代码如下: <div class="img"> <img...
    99+
    2024-04-02
  • Vue实现点击按钮进行上下页切换
    本文实例为大家分享了Vue实现点击按钮进行上下页切换的具体代码,供大家参考,具体内容如下 案例效果: 完整代码如下:  <template>   <di...
    99+
    2024-04-02
  • vue中axios如何实现重复点击取消上一次请求封装
    这篇文章主要为大家展示了“vue中axios如何实现重复点击取消上一次请求封装”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中axios如何实现重复点击取...
    99+
    2024-04-02
  • jQuery实现点击切换验证码
    随着互联网的快速发展,验证码已经成为了不可或缺的一环。无论是注册、登录还是提交订单等,都需要我们输入正确的验证码才能继续操作。而现在的验证码已经不再是那些简单的数字或字母了,更多的是带有图片、滑块等交互的复杂验证码。在网站开发中,实现验证码...
    99+
    2023-05-14
  • vue中radio单选框如何实现取消选中状态问题
    目录vue radio单选框如何取消选中状态客户需求如何获取radio的选中值 、选中状态方法1方法2总结vue radio单选框如何取消选中状态 客户需求 单选radio选中后,再...
    99+
    2023-05-20
    vue中radio单选框 radio单选框取消选中状态 radio单选框选中状态
  • Android 中使用EditText 点击全选再次点击取消全选功能
    最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标。点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标。 大部分浏览器都是这样的逻辑...
    99+
    2022-06-06
    edittext 全选 Android
  • vue2.0中click点击当前li如何实现动态切换class
    这篇文章主要为大家展示了“vue2.0中click点击当前li如何实现动态切换class”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue2.0中click点...
    99+
    2024-04-02
  • Vue实现Tab选项卡切换
    本文实例为大家分享了Vue实现Tab选项卡切换的具体代码,供大家参考,具体内容如下 点击不同的标题显示出相应的图片 代码如下 <!DOCTYPE html> <...
    99+
    2024-04-02
  • 如何在Vue中实现替换路由而不切换选项卡
    随着前端技术的不断发展,Vue成为了一个非常流行的前端框架。在Vue开发过程中,路由系统是不可或缺的一个重要部分。但是,有时候我们需要在不刷新整个页面的情况下切换路由,同时还需要保持当前选项卡的状态不变。本文将介绍如何在Vue中实现替换路由...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作