网站被挂马怎么处理,微信开发工具的公司,网站会员功能,学历提升机构上一篇#xff1a;Vue的指令
https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5501
本篇所需指令#xff1a; v- for v-model v-on v-show
目录
删除功能
添加功能 统计功能
清空功能
v-show 删除功能
!DOCTYPE html
…上一篇Vue的指令
https://blog.csdn.net/m0_67930426/article/details/134599378?spm1001.2014.3001.5501
本篇所需指令 v- for v-model v-on v-show
目录
删除功能
添加功能 统计功能
清空功能
v-show 删除功能
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idapp
headerh1记事本/h1input placeholder请输入任务 /button classadd添加任务/button
/header
section classmaindiv classmainul classdo-listli classtodo v-for(item,index) in list :keyitem.iddiv classviewspan classindex{{index1}}./spanlabel{{item.text}}/labelbutton clickdel(item.id) classdestroy x/button/div/li/ul/div
/section
footer classfooterspan classcount合计:strong2/strong/spanbutton classclear 清空任务/button
/footer
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{list:[{id:1,text:记得带语文书},{id:2,text:记得带数学书},]},methods:{del(id){this.listthis.list.filter(item item.id!id)}}});
/script/body
/html 添加功能 add(){if(this.thing.trim()){alert(请输入任务名称)return}this.list.unshift({id:,text: this.thing,})} 这里主要使用了v-model指令通过v-model指令绑定输入框获取表单元素的内容
unshift() 方法可向数组的开头添加一个或更多元素并返回新的长度。 统计功能 核心是计算数组的长度
清空功能 原理 点击清空按钮将原数组变为空数组
v-show 当点击清空按钮的时候将底部隐藏 all-functions !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idapp
headerh1记事本/h1input v-modelthing placeholder请输入任务 /button clickadd()添加任务/button
/header
section classmaindiv classmainul classdo-listli classtodo v-for(item,index) in list :keyitem.iddiv classviewspan classindex{{index1}}./spanlabel{{item.text}}/labelbutton clickdel(item.id) classdestroy x/button/div/li/ul/div
/section
footer classfooter v-showlist.length0span classcount合计:strong{{list.length}}/strong/spanbutton clickclear() 清空任务/button
/footer
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptvar appnew Vue({el:#app,data:{thing:,list:[{id:1,text:记得带语文书},{id:2,text:记得带数学书},]},methods:{del(id){this.listthis.list.filter(item item.id!id)},add(){if(this.thing.trim()){alert(请输入任务名称)return}this.list.unshift({id:,text: this.thing,})},clear(){this.list[]}}});
/script/body
/html
