ElementUI el-switch 使用详解

ElementUI的el-switch 是一个开关组件，用于切换两种状态。以下是如何使用el-switch的基本代码示例：

1. 首先，确保你已经在项目中安装并引入了ElementUI。
2. 在你的Vue组件中，你可以这样使用el-switch组件：

<template>
  <el-switch
    v-model="switchValue"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="开启"
    inactive-text="关闭"
    @change="handleSwitchChange">
  </el-switch>
</template>
 
<script>
export default {
  data() {
    return {
      switchValue: false
    };
  },
  methods: {
    handleSwitchChange(value) {
      console.log('Switch value changed to:', value);
      // 这里可以执行你的逻辑，比如发起网络请求来更新服务器端的状态
    }
  }
};
</script>

在这个例子中，v-model 用于双向绑定开关的状态到switchValue变量。active-color和inactive-color属性分别用于定义开启和关闭时的颜色。active-text和inactive-text属性用于显示在开关旁边的文本。@change事件监听开关状态的变化，并在状态改变时触发handleSwitchChange方法。