vue switch用法

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

<script>
export default {
  data() {
    return {
      isSwitchOn: false // 初始状态为关闭
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

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

   • 使用了一个 label 标签来包裹开关按钮和文本。
   • 使用了 input 元素，并设置其类型为 checkbox，通过 v-model 指令将其绑定到 isSwitchOn 数据属性上。这样当用户点击开关时，isSwitchOn 的值会自动更新。
   • 使用了一个 p 标签来显示当前的开关状态，通过三元运算符来判断 isSwitchOn 的值并显示相应的文本。

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

   • 定义了一个 data 函数，返回一个对象，其中包含 isSwitchOn 属性，初始值为 false，表示开关默认是关闭的。

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

   • 可以根据需要自定义样式，这里没有特别的样式，保持简洁。

这个示例展示了如何使用 Vue.js 实现一个简单的开关功能，并通过 v-model 实现双向数据绑定。