首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-switch：
<template>
<div>
<van-switch v-model="switchValue" />
<p>开关状态: {{ switchValue ? '开启' : '关闭' }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { Switch } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Switch.name]: Switch,
},
setup() {
const switchValue = ref(false);
return {
switchValue,
};
},
};
</script>
在上面的例子中，我们使用了 van-switch 组件，并通过 v-model 指令将开关的状态与一个 Vue 变量 switchValue 进行双向绑定。
你可以根据需要设置 van-switch 组件的一些属性，比如 size 来设置开关的大小，还可以监听 @change 事件来处理开关状态变化时的逻辑。
在这个例子中，我们在开关下方显示了当前的状态，你可以根据实际需求自定义开关的样式和其他属性。
转载请注明出处：http://www.zyzy.cn/article/detail/5815/Vant