Element-UI--＜el-switch＞的@change回调函数的参数用法

发布时间：2024-01-06

推荐整理分享Element-UI--＜el-switch＞的@change回调函数的参数用法，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

原文网址：Element-UI--＜el-switch＞的@change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客

简介

说明

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

需求

2个switch组件，用同一个回调函数switch组件状态发生变化时需要知道它目前开关状态需要知道当前是哪个switch问题：不传递参数时只能知道开关状态 Element-UI--＜el-switch＞的@change回调函数的参数用法

官方文档对switch事件的描述

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

代码

<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的博客-CSDN博客

本文链接地址:https://www.jiuchutong.com/zhishi/288079.html 转载请保留说明！

上一篇：一篇文章带你解1+X Web 前端开发考核考纲（详细介绍）（涵盖初级、中级、高级）(解读一篇文章)

下一篇：关于 Token 过期问题的两种解决方案(token过期处理)