机构改革网站建设,信用卡网站建设,电影资源网站开发,网站前端设计公司个人名片#xff1a; #x1f60a;作者简介#xff1a;一名大二在校生 #x1f921; 个人主页#xff1a;坠入暮云间x #x1f43c;座右铭#xff1a;懒惰受到的惩罚不仅仅是自己的失败#xff0c;还有别人的成功。 #x1f385;**学习目标: 坚持每一次的学习打卡 文章… 个人名片 作者简介一名大二在校生 个人主页坠入暮云间x 座右铭懒惰受到的惩罚不仅仅是自己的失败还有别人的成功。 **学习目标: 坚持每一次的学习打卡 文章目录 实现功能小黑记事本代码模板1.添加功能和列表渲染2.删除功能3.统计任务和清空任务 案例总结 今天的学习任务是做一个小黑记事本一个小案例进行练习。 经过前几周的学习相信大家对vue基础知识已经有了大概的了解复习之前学的知识一起做一个综合案例进行巩固练习吧 如下是今天要完成的案例
实现功能
如图所示我们要做的是一个小黑记事本完成功能有
添加任务删除任务统计任务清空任务
小黑记事本代码模板
将模板代码复制到编辑器中就可以使用了
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input placeholder请输入任务 classnew-todo /button classadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtododiv classviewspan classindex1./span label吃饭饭/labelbutton classdestroy/button/div/li/ul/section!-- 统计和清空 --footer classfooter!-- 统计 --span classtodo-count合 计:strong 1 /strong/span!-- 清空 --button classclear-completed清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {}})/script
/body
/html 千万不要忘记引用vue不然会报错 1.添加功能和列表渲染
添加功能实现步骤 1.首先通过v-model进行绑定输入框获取表单元素输入内容 2.在点击添加任务的按钮上使用click进行新增 3.在数组最前面添加内容 使用unshift 4.先将数据进行列表渲染
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input v-modeltodoList placeholder请输入任务 classnew-todo /button classadd clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item,index) in list :keyitem.iddiv classviewspan classindex{{index1}}/span label{{item.name}}/labelbutton classdestroy clickdel(item.id)/button/div/li/ul/section!-- 统计和清空 --footer classfooter!-- 统计 --span classtodo-count合 计:strong 1 /strong/span!-- 清空 --button classclear-completed 清空任务/button/footer
/section!-- 底部 --
script src../vue.js/script
scriptconst app new Vue({el: #app,data: {todoList:,//渲染数据list:[{id:1,name:跑步一小时},{id:2,name:跳舞一小时},{id:3,name:跳绳1000个}]},methods:{//添加功能add(){输入框中内容不为空if(this.todoList.trim()){alert(请输入任务名称)return}this.list.unshift({id:new Date(),name:this.todoList})this.todoList}}})/script
/body
/html
1.首先我们要想将数据进行渲染 2.我在添加任务中写了个警示框要先输入才可以进行添加数据 3.可以随意写一些任务看是否可以进行添加
2.删除功能
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input v-modeltodoList placeholder请输入任务 classnew-todo /button classadd clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item,index) in list :keyitem.iddiv classviewspan classindex{{index1}}/span label{{item.name}}/labelbutton classdestroy clickdel(item.id)/button/div/li/ul/section!-- 统计和清空 --footer classfooter!-- 统计 --span classtodo-count合 计:strong 1 /strong/span!-- 清空 --button classclear-completed 清空任务/button/footer
/section!-- 底部 --
script src../vue.js/script
scriptconst app new Vue({el: #app,data: {todoList:,//渲染数据使用v-for渲染list:[{id:1,name:跑步一小时},{id:2,name:跳舞一小时},{id:3,name:跳绳1000个}]},methods:{//添加功能add(){if(this.todoList.trim()){alert(请输入任务名称)return}this.list.unshift({id:new Date(),name:this.todoList})this.todoList},//删除功能del(id){this.listthis.list.filter(itemitem.id!id)}}})/script
/body
/html 3.统计任务和清空任务
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input v-modeltodoList placeholder请输入任务 classnew-todo /button classadd clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item,index) in list :keyitem.iddiv classviewspan classindex{{index1}}/span label{{item.name}}/labelbutton classdestroy clickdel(item.id)/button/div/li/ul/section!-- 统计和清空 使用v-show隐藏空白部分 --footer classfooter v-showlist.length0!-- 统计使用length计算list长度--span classtodo-count合 计:strong{{list.length}} /strong/span!-- 清空 --button classclear-completed clickclear 清空任务/button/footer
/section!-- 底部 --
script src../vue.js/script
scriptconst app new Vue({el: #app,data: {todoList:,//渲染数据list:[{id:1,name:跑步一小时},{id:2,name:跳舞一小时},{id:3,name:跳绳1000个}]},methods:{//添加功能add(){if(this.todoList.trim()){alert(请输入任务名称)return}this.list.unshift({id:new Date(),name:this.todoList})this.todoList},//删除功能del(id){this.listthis.list.filter(itemitem.id!id)},clear(){this.list[]}}})/script
/body
/html
如图所示 1.计算任务总数 2清空所有的任务
案例总结
总结 1.列表渲染 v-for :key设置 {{}}插值语法 2.删除功能 v-on调用传参filter过滤 覆盖修改原数组 3.添加功能 v-model绑定 unshift修改原数组添加 4.底部统计和清空 数组.length累计长度 unshift覆盖数组清空列表 v-show 控制隐藏
