案例 — 搜索/删除/更改

最后更新于:2022-04-02 08:07:02

[TOC] >[success] # 搜索和删除 ~~~ 1.这里单独把搜索和删除提出来,是因为两者有简易的方法的使用 2.删除和更改 这里推荐使用splice和index搭配 3.查询有种一种是一边输入一遍查询,一种格式点击查询,但注意都需要将总数据 和查询数据分开处理。切查询数据要copy总数据 4.第三条也不是绝对的可以通过计算属性来进行搜索数据 ~~~ >[danger] ##### 删除案例 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/318b3809aeb48af4f7b332c135de1324_108x92.png) ~~~ 1.配合splice 使用,this.list.splice(index,1);第一个参数,起始位置,第二个参数, 删除的个数 ~~~ ~~~ Title
  • {{item}}
~~~ >[danger] ##### 更改 ~~~ 1.更改不做案例讲解因为在v-on的章节有讲解set和$set 的更改方式 2.还有一种是splice 的更改方式,详细的使用看前端手册对这个方法有讲解 ~~~ >[info] ## 搜索 ~~~ 1.搜索有三种,第一种后台搜索,第二种前端搜索(点击按钮触发搜索),第三种前 端搜索(一遍输入一遍搜索) 2.这里不对后台搜素做探讨 3.但是搜索的时候需要另一个变量,专门讲搜索源数据和总数据进行分开的 ~~~ >[danger] ##### 点击按钮搜索 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/e0c197964d94ff32565d32143ef01745_272x133.png) ~~~ 1.搜索推荐两个方法一个indexOf,一个是es6的includes ~~~ ~~~ Title
  • {{item}}
~~~ >[danger] ##### 输入及搜索 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/48bd891852a02673c80bf7920c9449a1_183x110.png) ~~~ 1.通过计算属性进行搜索 ~~~ ~~~ Title
  • {{i}}
~~~
';