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>