<template>
<div>
<p>开关状态:{{ toggleState ? '开启' : '关闭' }}</p>
<button @click="toggle">切换开关状态</button>
</div>
</template>
<script>
import { useToggle } from 'vant';
export default {
setup() {
// 使用 useToggle 创建开关状态
const { state: toggleState, toggle } = useToggle();
return {
toggleState,
toggle,
};
},
};
</script>
在这个示例中,我们使用 useToggle 创建了一个开关状态,并通过 state 和 toggle 获取开关状态和切换开关状态的方法。当按钮被点击时,开关状态会切换。
useToggle 还可以接受一个参数作为初始的开关状态,例如:
const { state: toggleState, toggle } = useToggle(true); // 初始状态为 true
这样,初始时开关状态就是开启的。
useToggle 的完整用法可以参考 Vant3 的官方文档,其中还包括了一些其他的参数和配置项,例如传入的回调函数等。
转载请注明出处:http://www.zyzy.cn/article/detail/5779/Vant