# Checkbox 多选框

一组备选项中进行多选

# 基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

pick me

在fe-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。

点击查看代码

<template>
  <fe-checkbox v-model="checked">pick me</fe-checkbox>
</template>
<script>
export default {
  data() {
    return {
      checked: true,
    }
  }
}
</script>

# 多选框组

适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。

吃饭看书玩

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 fe-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

点击查看代码

<template>
  <fe-checkbox-group v-model="hobby">
    <fe-checkbox label="吃饭"></fe-checkbox>
    <fe-checkbox label="看书"></fe-checkbox>
    <fe-checkbox label="玩"></fe-checkbox>
  </fe-checkbox-group>
</template>
<script>
export default {
  data() {
    return {
      hobby: ['吃饭'],
    }
  }
}
</script>

# API

# Checkbox props

参数名称	参数描述	参数类型	默认值
label	单选框label值	[String, Number, Boolean]	—
name	表单命名	String	空
value/v-model	绑定值	Boolean	false

# CheckboxGroup props

参数名称	参数描述	参数类型	默认值
value/v-model	绑定值	Arr	—

← Radio 单选框 Form 表单 →