默认主题
复选框

示例

基本用法

Checkbox的基本用法,及禁用状态。通过v-model进行数据双向绑定。由于trueValue的默认值为true,所以可以直接传入value=true来指定选中状态。

选中状态的判定条件是value === trueValue || value.indexOf(trueValue),对于值为对象的情况要注意。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
Your selected: []
Checkbox组

和浏览器原生行为一样,给Checkbox指定相同的name,它们便组成了复选框组。

此时必须初始化绑定的属性为数组,否则Checkbox将类似radio一样只能单选

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
指定选中和非选中的取值

Checkbox默认选中的值为true,非选中的值为false,通过trueValuefalseValue属性,我们可以指定选中和非选中的值。

当指定值为对象时,不要在模板中直接定义对象字面量(如:trueValue={{ {a: 1} }}),因为在模板中创建的对象每次执行模板都会生成一份新数据,使全等判断(===)失效。此时应该在js中定义该对象,然后模板中引用它。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

Your selected: []
半选中状态

通过indeterminate属性可以控制Checkbox的半选中状态

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
disabled 是否禁用 Boolean false
name inputname属性,用于指定Checkbox组 String undefind
value 复选框组的取值,用于v-model进行双向绑定 * false
trueValue 当前复选框选中的值 * true
falseValue 当前复选框取消选中的值 * false
indeterminate 是否半选中状态 Boolean false