首先，确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装：
npm install vant
# 或者
yarn add vant
然后，在你的 Vue 项目中，可以这样使用 Vant Checkbox 组件：
<template>
<div>
<!-- 单个复选框 -->
<van-checkbox v-model="checked1">复选框1</van-checkbox>
<!-- 多个复选框 -->
<van-checkbox-group v-model="checkedList">
<van-checkbox name="checkbox1">复选框2</van-checkbox>
<van-checkbox name="checkbox2">复选框3</van-checkbox>
<van-checkbox name="checkbox3">复选框4</van-checkbox>
</van-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checked1: true, // 单个复选框的绑定值
checkedList: ['checkbox1'], // 多个复选框的绑定值，初始化为选中的复选框的 name 属性值
};
},
};
</script>
<style>
/* 在这里可以添加样式 */
</style>
在这个例子中，我们使用了 <van-checkbox> 和 <van-checkbox-group> 组件。<van-checkbox> 用于单个复选框，通过 v-model 绑定了选中状态；<van-checkbox-group> 用于管理多个复选框，通过 v-model 绑定了选中的复选框的 name 属性值的数组。
请确保在你的项目中正确引入了 Vant UI 组件库，并按照文档中的方式进行配置。这只是一个简单的例子，你可以根据实际需求进一步配置和定制 Vant Checkbox 组件。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5656/Vant