基本用法：
<template>
<van-checkbox v-model="isChecked">复选框</van-checkbox>
</template>
<script>
export default {
data() {
return {
isChecked: false
};
}
};
</script>
在上述代码中，通过 v-model 双向绑定的方式，你可以获取用户是否选中复选框。
多个复选框：
<template>
<div>
<van-checkbox v-model="checkedFruits" name="apple">苹果</van-checkbox>
<van-checkbox v-model="checkedFruits" name="banana">香蕉</van-checkbox>
<van-checkbox v-model="checkedFruits" name="orange">橙子</van-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkedFruits: []
};
}
};
</script>
通过使用同一个 v-model 和为每个 Checkbox 设置不同的 name，你可以创建一个多选的复选框组。
禁用状态：
<template>
<van-checkbox v-model="isChecked" :disabled="isDisabled">禁用复选框</van-checkbox>
</template>
<script>
export default {
data() {
return {
isChecked: false,
isDisabled: true
};
}
};
</script>
通过设置 disabled 属性，你可以使复选框进入禁用状态，用户无法进行交互。
自定义图标和颜色：
<template>
<van-checkbox v-model="isChecked" icon="star" checked-color="#f00">自定义图标和颜色</van-checkbox>
</template>
<script>
export default {
data() {
return {
isChecked: false
};
}
};
</script>
通过设置 icon 属性，你可以使用自定义的图标，通过 checked-color 属性，你可以设置选中状态的颜色。
以上是一些 Vant3 Checkbox 复选框组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Checkbox 复选框文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/checkbox)。
转载请注明出处：http://www.zyzy.cn/article/detail/5719/Vant