[TOC] >[success] # 搜索和删除 ~~~ 1.这里单独把搜索和删除提出来,是因为两者有简易的方法的使用 2.删除和更改 这里推荐使用splice和index搭配 3.查询有种一种是一边输入一遍查询,一种格式点击查询,但注意都需要将总数据 和查询数据分开处理。切查询数据要copy总数据 4.第三条也不是绝对的可以通过计算属性来进行搜索数据 ~~~ >[danger] ##### 删除案例 ![](https://box.kancloud.cn/318b3809aeb48af4f7b332c135de1324_108x92.png) ~~~ 1.配合splice 使用,this.list.splice(index,1);第一个参数,起始位置,第二个参数, 删除的个数 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入Vue cdn 的网址--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" style="margin: 0 auto;width: 960px" > <ul> <li v-for="item,index in list" @click="removeHandel(index)">{{item}}</li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { list:["1", "2", "3", "4"] }, methods:{ removeHandel(index){ this.list.splice(index,1); } } }); </script> </body> </html> ~~~ >[danger] ##### 更改 ~~~ 1.更改不做案例讲解因为在v-on的章节有讲解set和$set 的更改方式 2.还有一种是splice 的更改方式,详细的使用看前端手册对这个方法有讲解 ~~~ >[info] ## 搜索 ~~~ 1.搜索有三种,第一种后台搜索,第二种前端搜索(点击按钮触发搜索),第三种前 端搜索(一遍输入一遍搜索) 2.这里不对后台搜素做探讨 3.但是搜索的时候需要另一个变量,专门讲搜索源数据和总数据进行分开的 ~~~ >[danger] ##### 点击按钮搜索 ![](https://box.kancloud.cn/e0c197964d94ff32565d32143ef01745_272x133.png) ~~~ 1.搜索推荐两个方法一个indexOf,一个是es6的includes ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入Vue cdn 的网址--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app" style="margin: 0 auto;width: 960px" > <input v-model="sreachKey"><input value="搜索" type="button" @click="sreach"> <ul> <li v-for="item,index in clist">{{item}}</li> </ul> </div> <script> let list = ["1", "2", "3", "4"]; let clist = ["1", "2", "3", "4"]; // 实际工作汇中这个clist其实是会被我们深copy一份 var vm = new Vue({ el: '#app', data: { sreachKey:"", list, clist, }, methods:{ sreach(){ this.clist = this.list.filter(item => { // if(item.indexOf(keywords) != -1) // 注意 : ES6中,为字符串提供了一个新方法,叫做 String.prototype.includes('要包含的字符串') // 如果包含,则返回 true ,否则返回 false // contain if (item.includes(this.sreachKey)) { return item } }); } } }); </script> </body> </html> ~~~ >[danger] ##### 输入及搜索 ![](https://box.kancloud.cn/48bd891852a02673c80bf7920c9449a1_183x110.png) ~~~ 1.通过计算属性进行搜索 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入Vue cdn 的网址--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <style> .red { background-color: red; } </style> </head> <body> <div id="box"> <input v-model="search"> <ul> <li v-for="i in computedSearch"> {{i}} </li> </ul> </div> <script type="text/javascript"> var vm = new Vue({ el:"#box", data:{ search:"", list:["aa","abb","ccc"] }, computed:{ computedSearch(){ return this.list.filter(item=>{ return item.indexOf(this.search) !=-1 }) } } }) </script> </body> </html> ~~~