案例 -- 搜索/删除/更改 · Vue&&TypeSprict--基础总结

[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>  <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>  <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>  <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> ~~~