vue switch

<template>
  <div>
    <label>
      Switch:
      <input type="checkbox" v-model="isChecked">
    </label>
    <p>当前状态: {{ isChecked ? '开启' : '关闭' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

<style scoped>
/* 添加一些样式以增强视觉效果 */
input[type="checkbox"] {
  appearance: none;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  position: relative;
  outline: none;
  transition: background 0.3s;
}

input[type="checkbox"]:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: left 0.3s;
}

input[type="checkbox"]:checked {
  background: #4caf50;
}

input[type="checkbox"]:checked:after {
  left: 20px;
}
</style>

解释说明

1. 模板部分 (<template>):

   • 使用了一个 label 标签来包裹一个复选框 (input[type="checkbox"]) 和一段文本。
   • 复选框的状态通过 v-model 指令与 isChecked 数据属性进行双向绑定。
   • 显示当前状态的段落，使用三元运算符根据 isChecked 的值显示不同的文本。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，并在 data 函数中返回了一个初始为 false 的 isChecked 属性。

3. 样式部分 (<style scoped>):

   • 自定义了复选框的外观，使其看起来像一个开关（switch）。
   • 使用 CSS 实现了开关的切换动画和颜色变化。