Element-UI--<el-switch>的@change回调函数的参数用法_el-switch change_IT利刃出鞘的博客-程序员秘密

技术标签: 前端  前端UI框架  javascript  开发语言  

原文网址:Element-UI--<el-switch>的@change回调函数的参数用法_IT利刃出鞘的博客-程序员秘密

简介

说明

        本文介绍Element-UI的<el-switch>的@change回调函数的参数用法。

需求

  1. 2个switch组件,用同一个回调函数
  2. switch组件状态发生变化时需要知道它目前开关状态
  3. 需要知道当前是哪个switch

问题:不传递参数时只能知道开关状态

官方文档对switch事件的描述

事件名称 说明 回调参数
change switch 状态发生变化时的回调函数 新状态的值

代码

<template>
  <div>
    <el-switch
      v-model="value1"
      @change="changeStatus"
    >
    </el-switch>

  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      value1: false
    }
  },
  methods: {
    changeStatus (status) {
      console.log('事件')
      console.log(status)
    }
  }
}
</script>

<style scoped>

</style>

测试

解决方案:传递$event和其他参数

$event会包含开关状态的值,可以将它作为参数。另外可以指定其他参数。

<template>
  <div>
    <el-switch
      v-model="value1"
      @change="changeStatus($event, 1)"
    >
    </el-switch>

  </div>
</template>

<script>
export default {
  name: 'Demo',
  data () {
    return {
      value1: false
    }
  },
  methods: {
    changeStatus ($event, switchNum) {
      console.log('事件')
      console.log($event)
      console.log('序号')
      console.log(switchNum)
    }
  }
}
</script>

<style scoped>

</style>

测试(可以获取开关状态和当前是第几个按钮)

其他网址

ElementUI中switch回调函数change的参数问题_fool_dawei的博客-程序员秘密

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/feiying0canglang/article/details/126910516

智能推荐

RK3288 android7.1 蓝牙MAC地址获取_rk 蓝牙mac_ansondroider的博客-程序员秘密

平台RK3288 + Android 7.1概述本文用于跟踪android获取蓝牙MAC接口实现的代码流程.APPFRAMEWORKBluetoothJNIHALgetAddress()bindServicegetAddress()initNativeadapter_properties_callbackAPPFRAMEWORKBluetoothJNIHAL实现与参考代码Android...

卷积及其快速算法的C++实现_weixin_34014555的博客-程序员秘密

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

如何在html网页中加入椭圆按钮,在html5的Canvas上绘制椭圆的几种方法总结_weixin_39560604的博客-程序员秘密

概述HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同:context为Canvas的2D绘图环境对象,x为椭圆中心横坐标,y为椭圆中心纵坐标,a为椭圆横半轴长,b为椭圆纵半轴长。参数方程法该方法利用椭圆的参数方程来绘制椭圆复制代码 代码如下://-----------用参数方程绘制椭圆----------------...

网络的校验和_互联网检验和_小船飞雪的博客-程序员秘密

关于反码求和这个事情,IP/ICMP/IGMP/TCP/UDP等协议的[1]校验和算法都是相同的。为了求网络协议的校验和,需要把报文的二进制按word,也就是2个字节分割,校验和字段填0,尾部为奇数字节则添加一个字节0. 二字节求和后取反。其实这个事情概念上有点误导,让大家以为是所有2个字节都取反码,然后求和,最后再取反放到校验和字段。当然这样就很绕了。那以此求和取反,当收到报文重新按2字节二进制求和时,因为最终加了取反的校验和,所以最终结果会是binary全1,即0xFFFF。当然了...

系统的权限设计_系统功能权限设计_shliuzw的博客-程序员秘密

权限管理 Authority Management目前主要是通过用户、角色、资源三方面来进行权限的分配。具体来说,就是赋予用户某个角色,角色能访问及操作不同范围的资源。通过建立角色系统,将用户和资源进行分离,来保证权限分配的实施。一般指根据系统设置的安全规则或者安全策略,用户可以访问而且只能访问自己被授权的资源。场景举例企业IT管理员一般都能为系统定义角色,给用户分配角色。这就是最常见的基于角色访问控制。场景举例:给张三赋予“人力资源经理”角色,“人力资源经理”具有“查询

HashMap源码分析笔记(一)_weixin_30384031的博客-程序员秘密

一、结构HashMap的结构由数组和链表组成,可以说是一个链表类型的数组:快速定位方式:key值得hash变换作为数组索引快速找到对应数组块,之后通过hash值对比从链表中查找到匹配项。hash函数:hash()key的hash值是实际是key的hashCode值的低16位与高16位异或结果。之所以这样是为了减少数组定位时发生哈希碰撞。数组下标是这样确定的:i ...

随便推点

从SpringFox向SpringDoc转移(OpenAPI2向OpenAPI3转移)_openapi2和3区别_BackgroundHero的博客-程序员秘密

转移原因在学习使用spring集成swagger3时查阅文档发现SpringFox未支持 OpenAPI3 标准,而是还在支持2017年就已经停止维护的OpenAPI2了而搜遍全网写OpenAPI3的教程少的可怜但还是找到了与之相关的文章文章跳转但没有关于权限验证的相关教程,答案还得去官网找官网链接转移步骤删除springfox和swagger 2依赖项。而是添加springdoc-openapi-ui依赖2.替换注解3.替换Docket添加OpenAPI类型的

dp与px转换_tanqiantot的博客-程序员秘密

关于px与dp的一些资料:dp与px的关系:QVGA: density=0.75 densityDpi=120 QVGA(240*320)HVGA:density=1.0 densityDpi=160 HVGA(320*480)VGA:density=1.0 densityDpi=160 VGA(480*640)WVGA:density = 1.5 densityDpi

华为云服务器7天免费体验试用_华为云试用_客服张敏的博客-程序员秘密

华为云服务器7天免费体验试用华为云弹性云服务器云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。云服务器帮助您快速构建更稳定、安全的应用,降低开发运维的难度和整体IT成本,使您能够更专注于核心业务的创新。【华为云弹性云服务器作用】用户可以方便的进行远程维护,免费重装系统 硬件级别上实现云主机之...

随笔--读书笔记《人人都是产品经理2.0--写给泛产品经理》苏杰_人人都是产品经理2.0读书笔记_暴雪2008的博客-程序员秘密

前言最近整理读过的对自己有影响的书,整理一下,回味一下。人人都是产品经理2.0 是苏杰老师的力作,书中的很多业界的产品思路都是值得回味和学习的。心得书中通过很多现实的产品设计比如火锅鸳鸯锅的产品设计、淘宝支付宝下单扣库存的产品设计,再到产品的思维方式、产品的设计理念,考虑利益的均衡(比如商户和用户)等等。一些产品概念的筛选、需求的采集、用户需求的理解,需求的分析。Y 模型:1.用户的需求场景,表象,第一深度2.用户需求背后的目标和动机,第二深度3.产品功能,是解决方案。4.人性,或者说价值

使用HAL库开发STM32:ADC基础使用_hal库adc_Naisu Xu的博客-程序员秘密

文章目录目的基础说明基础使用配置选项说明轮询 单次 非扫描轮询 连续 非扫描轮询 单次 扫描总结目的ADC(模拟数字转换器)是现在单片机上基本都有的外设,可以把一个模拟的电压转换成数据。这篇文章将以 STM32F405RG 为基础介绍通过HAL库来使用ADC的一些基础功能。基础说明STM32的单片机通常都有多个ADC,每个ADC具有多个通道连接到外部的GPIO口。不同的ADC部分通道可能共用GPIO口。引脚数量大于等于100的封装上通常会有 VREF 引脚,ADC可转换的电压不大于 VREF 上的

Enter passphrase for key '/home/mha/.ssh/id_rsa解决方法_遗失的曾经!的博客-程序员秘密

ssh互信做完后发现仍然无法ssh免密登录,提示:[[email protected] ~]$ ssh localhost dateEnter passphrase for key '/home/mha/.ssh/id_rsa': 检查ssh的配置文件发现所给机器的系统配置有问题,解决方法:vi /etc/ssh/sshd_config把下面的三行加上注释##PubkeyAuthenticati...

推荐文章

热门文章

相关标签