多语言企业网站开发,京东联盟网站建设电脑版,房地产基础知识300问,wordpress超详细教程通俗易懂#xff0c;完成“学习计划表”用于对学习计划进行管理#xff0c;包括对学习计划进行添加、删除、修改等操作。
一. 初始页面效果展示 二.添加学习计划页面效果展示 三.修改学习计划完成状态的页面效果展示 四.删除学习计划
当学习计划处于“已完成”状态时…通俗易懂完成“学习计划表”用于对学习计划进行管理包括对学习计划进行添加、删除、修改等操作。
一. 初始页面效果展示 二.添加学习计划页面效果展示 三.修改学习计划完成状态的页面效果展示 四.删除学习计划
当学习计划处于“已完成”状态时学生可以对学习计划进行删除操作否则不能进行删除操作。
在html案例引入样式
link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.css relstylesheet/ 新建 llk.vue文件 在llk.vue文件中写入代码
templatediv classcard!-- 标题区域 --div classcard-header学习计划表/div!-- 提交区域 --div classcard-bodyform submit.preventadddiv classrow g-4!-- 学习科目 --div classcol-autodiv classinput-group mb-3span classinput-group-text idbasic-addon1学习科目/spaninput typetext classform-control placeholder请输入学习科目 v-model.trimsubject //div/div!-- 学习任务 --div classcol-autodiv classinput-group mb-3span classinput-group-text idbasic-addon1学习内容/spantextarea classform-control v-model.trimcontent placeholder请输入学习内容 :style{ height: 32px }/textarea/div/div!-- 学习地点 --div classcol-autodiv classinput-group mb-3span classinput-group-text idbasic-addon1学习地点/spanselect classform-select form-select-sm v-modelselectedOptionoption v-foroption in options :valueoption.place :keyoption.placeCode{{ option.place }}/option/select/div/div!-- 添加按钮 --div classcol-autobutton typesubmit classbtn btn-primary添加/button/div/div/form/div/divtable classtable table-striped table-hover table-borderedtheadtrth scopecol序号/thth scopecol学习科目/thth scopecol学习内容/thth scopecol学习地点/thth scopecol完成状态/thth scopecol操作/th/tr/theadtbodytr v-foritem in list :keyitem.idtd{{ item.id }}/tdtd{{ item.subject }}/tdtd{{ item.content }}/tdtd{{ item.place }}/tdtddiv classform-check form-switchinput classform-check-input typecheckbox roleswitch idcb item.idv-modelitem.status /label classform-check-label forcb item.id v-ifitem.status已完成/labellabel classform-check-label forcb item.id v-else未完成/label/div/tdtda hrefjavascript:; clickremove(item.id)删除/a/td/tr/tbody/table/templatescript setupimport {ref} from vueconst list ref([{id: 1,subject: Vue.js 前端实战开发,content: 学习指令例如 v-if、v-for、v-model 等,place: 自习室,status: false,}, ])let remove (id, status) {if (status) {list.value list.value.filter(item item.id ! id)} else {alert(请完成该学习计划后再进行删除操作)}}let subject ref()let content ref()let nextId ref()let selectedOption ref(自习室)let options ref([{placeCode: 0,place: 自习室,},{placeCode: 1,place: 图书馆,},{placeCode: 2,place: 宿舍,},])let add () {if (subject.value ) {alert(学习科目为必填项)return}nextId.value Math.max(...list.value.map(item item.id)) 1const obj {id: nextId.value,subject: subject.value,content: content.value,place: selectedOption.value,status: false,}list.value.push(obj)subject.value content.value selectedOption.value 自习室}
/scriptstyle
/style
找到main.js文件修改 成自己新建的名字 运行结果 输入科目学习内容选择学习地点进行添加 今天就分享到这里感谢预览~
