vue的el-switch开关组件增加change监听事件

原创已于 2022-09-08 17:45:26 修改 · 8.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#el-switch #vue el-elements #vue onchange #vue change #elementui

于 2022-07-05 11:16:24 首次发布

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element UI的el-switch组件来实现一个简单的开关按钮功能。通过v-model双向绑定数据，并利用@change事件触发开关状态改变后的处理函数。

1、功能场景

业务页面上需要增加一个开关按钮，使用el-switch标签控制了开和关两个值，用户可点击该按钮进行业务控制；

2、vue代码

静态代码中使用v-model绑定对象字段，使用@change为该开关绑定一个js功能函数，点击操作发生时执行turnOnOff()；

<template>
<p>
  <label>电磁阀</label>
  <span>
    <el-switch v-model="info.dcf" active-text="ON" inactive-text="OFF"
               @change="turnOnOff()" >
    </el-switch>
  </span>
</p>
</template>

在script块的methods:中声明并定义turnOnOff()函数；

<script>
export default {
	data(){...},
	mounted(){...},
	methods:{
		xxx(){...},
		yyy(){...},
		turnOnOff() {
	      this.$message.success("控制开关呢");
	    },
	},
}
</script>