el-checkbox的 v-modle、value、checked控制其选中状态区别

1.v-modle:双向绑定

el-checkbox的 v-modle、value、checked控制其选中状态区别_第1张图片

el-checkbox的 v-modle、value、checked控制其选中状态区别_第2张图片

通过修改checked的值可以控制复选框的选中状态,通过点击复选框选中或者取消选中复选框可以修改checked的值。

2.value:单项绑定

el-checkbox的 v-modle、value、checked控制其选中状态区别_第3张图片

 el-checkbox的 v-modle、value、checked控制其选中状态区别_第4张图片

 只能通过修改checked值改变其选中状态,不能通过点击复选框改变checked值,不能通过点击改变其选中状态,其选中状态依赖value,若想实现点击改变其选中状态可以添加change事件,通过change事件修改value值。

3.checked:初始选中状态

el-checkbox的 v-modle、value、checked控制其选中状态区别_第5张图片

el-checkbox的 v-modle、value、checked控制其选中状态区别_第6张图片

可以用checked设置复选框初始是否被选中,后期不能通过修改checked值改变复选框选中状态,也不能通过点击复选框修改checked的值。
看其源码可以看到,checked没有被监听,所以其值的改变组件不会被重新渲染,这里的checked是element-ui组件重新封装后的属性,与原生input复选框的checked属性不同。

你可能感兴趣的:(elementui,javascript)