本文我们通过一个小案例来巩固下前面讲的内容，具体案例效果如下:

在这里插入图片描述

其实也就是实现对表单数据的添加，删除和关键字查询的操作。

综合案例

1.页面布局

  页面布局我们通过bootstrap来快速实现，具体步骤如下

1.1 基础页面

1.2 表单布局

  使用bootstrap来设置table，在vscode中安装bootstrap插件

在这里插入图片描述

先把这两个插件给装好，

在这里插入图片描述

然后准备数据

在这里插入图片描述

v-for使用

在这里插入图片描述

页面效果如下

在这里插入图片描述

1.3 头部样式

通过bootstrap来添加头部布局

在这里插入图片描述

在这里插入图片描述

添加对应的添加元素

      
            
品牌管理
      
      
            
            Id:
            
            

            
            Name:
            
            


            
      

在这里插入图片描述

2.添加记录

  通过点击‘添加按钮’将数据添加到table中
通过v-model指令将id和name输入框的信息和vm中的id和name绑定，

在这里插入图片描述

在这里插入图片描述

给"添加按钮"绑定点击事件

在这里插入图片描述

添加效果

在这里插入图片描述

添加后将输入框内容置空

在这里插入图片描述

3.删除记录

删除记录的实现逻辑:点击删除链接，获取要删除记录的id，然后调用数组的splice方法来移除记录，

在这里插入图片描述

注意：方法名称不要使用delete!

数组常用的循环方法比较

通过数组的some方法来循环判断

在这里插入图片描述

或者通过findIndex方法来获取满足条件的下标，然后再删除数据:

在这里插入图片描述

删除效果

在这里插入图片描述

4.关键字查询

  关键字查询也就是根据用户的输入返回满足条件的信息，
添加搜索框

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

然后v-for中循环的信息就不能是直接操作list数据，而应该是调用方法返回的信息

在这里插入图片描述

添加search方法

在这里插入图片描述

通过foreach来实现效果

search(keywords){
  // 保存新的数组
   var newList = []
   this.list.forEach(item => {
       // 判断循环的记录是否包含的查询的关键字
       if(item.name.indexOf(keywords) != -1){
           // 将循环的记录添加到新的数组中
           newList.push(item)
       }
   })
   // 返回数组信息
   return newList
}

在这里插入图片描述

通过filter来实现效果

在这里插入图片描述

在这里插入图片描述

搞定！

数组常用的循环方法比较