首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Switch组件：
<template>
<div>
<van-switch v-model="switchValue" />
<p>{{ switchValue ? '开启' : '关闭' }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { Switch } from 'vant';
export default {
components: {
[Switch.name]: Switch,
},
setup() {
const switchValue = ref(false);
return {
switchValue,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的switchValue变量，用于存储用户选择的开关状态。然后，我们在模板中使用<van-switch>标签引入了Vant3的Switch组件，并通过v-model将switchValue与开关的状态进行绑定。
通过上述设置，用户在开关上进行切换时，switchValue变量会自动更新，从而获取用户选择的开关状态。在模板中我们使用了插值语法 {{ switchValue ? '开启' : '关闭' }} 来显示当前的开关状态。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5731/Vant