el-checkbox 无法动态设置勾选状态

问题

cheked 值动态变化,但是勾选状态无法动态改变

解决

v-model 与:checked 同时使用

html 复制代码
 <el-checkbox 
 class="add-shop-check" 
 v-model="renderData[0].isCheck" 
 :checked="renderData[0].isCheck" 
 @change="checked => selectChange(checked, 0)"
 ></el-checkbox>

v-modle:双向绑定:

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

设置复选框初始是否被选中,后期不能通过修改checked值改变复选框选中状态,也不能通过点击复选框修改checked的值。
value:单项绑定:

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

相关推荐
UI设计兰亭妙微9 分钟前
兰亭妙微:以HTML前端、UI/交互/图标设计赋能数字孪生与大屏设计新标杆
前端·ui·用户体验设计
一条大祥脚21 分钟前
势能分析与势能线段树
开发语言·javascript·数据结构·算法
jarreyer21 分钟前
【AI编程】claudecode插件配置记录和trae软件相关配置
前端·chrome·ai编程
奔跑的web.21 分钟前
TypeScript 类型断言
前端·javascript·typescript
ヤ鬧鬧o.23 分钟前
HTML多倒计时管理
前端·javascript·css·html5
知兀24 分钟前
【uniapp/vue3+ts/js】eslint9+prettier+husky+lint-staged
前端·javascript·uni-app
小北方城市网28 分钟前
Spring Cloud Gateway 动态路由进阶:基于 Nacos 配置中心的热更新与版本管理
java·前端·javascript·网络·spring boot·后端·spring
码上出彩34 分钟前
H5+CSS3响应式设计实战:基于Flex布局的适配方案
前端·css·css3
wqwqweee35 分钟前
Flutter for OpenHarmony 看书管理记录App实战:关于我们实现
android·javascript·python·flutter·harmonyos
你说爱像云 要自在漂浮才美丽35 分钟前
【HTML5与CSS3】
前端·css3·html5