Element el-switch 开关详解

1. 概述

开关就是从两个选项中切换，其实也可以用单选按钮/复选框实现切换功能，但是开关有一个动态的切换效果，在某些场景用起来效果更佳。

2. 值绑定

2.1 默认值绑定

开关默认绑定布尔值，true、false分别对应开关的两个状态。

默认绑定布尔值

   <el-switch v-model="boolValue">

   </el-switch>

data() {

   return {

     boolValue: true,

   }

 },

效果如下：

2.2 指定绑定值

也可以根据需求指定绑定的值：

指定绑定值

   <el-switch v-model="myValue" active-value="male" inactive-value="femael">

1

2

3

     myValue: 'male'

3. 外观

3.1 修改颜色

可以通过active-color、inactive-color修改颜色。

 修改颜色

   <el-switch v-model="boolValue" active-color="green" inactive-color="red">

3.2 修改显示文本

可以通过active-text、inactive-text修改显示文本信息。

修改文字描述

   <el-switch v-model="boolValue" active-text="启用" inactive-text="关闭">>

4. 状态变化事件

当开关的状态发生变化时，可以通过@change指定对一个的事件处理函数。

 状态变化事件，参数为新状态的值！

   <el-switch v-model="boolValue" @change="switchChange">

methods: {

   switchChange() {

     console.log(this.boolValue);

 }