基础用法

<template>
  <div>
    <v-switch v-model="value" @change="handleChange"></v-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: false
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

设置背景色

<template>
  <div>
    <v-switch v-model="value" active-color="#67C23A" inactive-color="#F56C6C"></v-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  }
}
</script>

扩展类型

<template>
  <div>
    <v-switch v-model="value" active-value="active" inactive-value="inactiveValue" @change="handleChange"></v-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    }
  }
}
</script>

禁用状态

<template>
  <div>
    <v-switch v-model="value" disabled></v-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true
    }
  }
}
</script>