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

目录

  • 1、功能场景
  • 2、vue代码
  • 3、实现效果

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>

3、实现效果

在这里插入图片描述

你可能感兴趣的:(前端,el-switch,vue,el-elements,vue,onchange,vue,change,elementui)