vue实训-学习计划表
本文介绍了一个基于 Vue 3 和 Bootstrap 5 开发“学习计划表”应用的完整案例。项目通过 VSCode 搭建,引入 Bootstrap CDN 样式,并实现以下核心功能:使用 `v-for` 动态渲染表格数据,展示序号、科目、内容、地点、完成状态和操作列;通过 `v-model` 绑定完成状态开关,并用动态 `id` 与 `label` 关联解决点击文字无法切换状态的问题;删除功能限定只有“已完成”的计划才能删除,否则弹出提示;新增计划通过表单提交实现,包含必填校验、`v-model.trim` 去除首尾空格,以及下拉框动态选项。案例覆盖 Vue 常用指令和事件绑定、修饰符等关键知识点,适合练习组件内数据管理、条件渲染和表单交互,最终提供可直接复用的完整代码。