08 增删查功能

划重点lable 标签keyup:键盘事件标签内添加样式style使用事件修饰符preventforEach :遍历 数组indexOf: 可以返回要查询的某个字符串值在整个字符串中首次出现的位置下标findIndex:返回传入一个测试条件函数符合条件数组的首个元素的位置splice:向/从数组中添加/删除项目然后返回被删除后的新的项目数组黑椒蟹 一对!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatiblecontentieedgescript src./lib/vue-2.6.10.js/scripttitle增删查功能/title/headbodydiv idapph3 stylebackground-color: burlywood ; height: 50px;添加/查询/删除功能 使用案例/h3tabletbodythId:/ththName:/ththOperation:/th/tbody/tablebrlabelId:input typetextv-modelid/labellabelName:input typetextv-modelnamekeyup.enteradd/labelinput typebuttonvalue添加v-on:clickaddinput typetextidinputsv-modelkeywordskeyup.entersearch查询brp v-foritem in search1(keywords)stylebackground-color: cadetbluev-bind:keyitem.idinput typecheckboxID:{{item.id}}Name:{{item.name}}!--input typebuttonvalue删除v-on:clickdel(item.id)--a hrefclick.preventdel(item.id)删除/a/pbrbrbrp v-foritem in newListDatastylebackground-color: cadetbluev-bind:keyitem.idinput typecheckboxID:{{item.id}}Name:{{item.name}}!--input typebuttonvalue删除v-on:clickdel(item.id)--a hrefclick.preventdel(item.id)删除/a/p/divscriptvarvmnewVue({el:#app,data:{id:null,name:null,keywords:,listData:[{id:11,name:宝马},{id:12,name:奔驰},{id:13,name:法拉利}],newListData:[{id:1001,name:宝马}]},methods:{add(){if(this.id!nullthis.name!null){this.listData.push({id:this.id,name:this.name})this.idthis.namenull}else{alert(请正确输入内容)}},del:function(id){varindexthis.listData.findIndex((item){if(item.idid){returntrue}})returnthis.listData.splice(index,1);},search(){varkeywordsdocument.getElementById(inputs).value;alert(keywords)if(keywordsnull){returnthis.listData}varnewList[];this.listData.forEach(item{if(item.name.indexOf(keywords)!-1){newList.push(item)}});this.newListDatanewListreturnnewList},search1(keywords){if(keywordsnull){returnthis.listData}varnewList[];this.listData.forEach(item{if(item.name.indexOf(keywords)!-1){newList.push(item)}});returnnewList}}})/script/body/html运行图1运行图2添加三个item通过“红”关键字查询