vue的el-switch开关组件增加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>

3、实现效果