本文我们通过一个小案例来巩固下前面讲的内容，具体案例效果如下:
其实也就是实现对表单数据的添加，删除和关键字查询的操作。
综合案例
1.页面布局
页面布局我们通过bootstrap来快速实现，具体步骤如下
1.1 基础页面
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>1.2 表单布局
使用bootstrap来设置table，在vscode中安装bootstrap插件
先把这两个插件给装好，
然后准备数据
v-for使用
页面效果如下
1.3 头部样式
通过bootstrap来添加头部布局
添加对应的添加元素
代码语言：javascript复制<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">品牌管理</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" >
</label>
<label>
Name:
<input type="text" class="form-control" >
</label>
<input type="button" value="添加" class="btn btn-primary">
</div>
</div>
2.添加记录
通过点击‘添加按钮’将数据添加到table中 通过v-model指令将id和name输入框的信息和vm中的id和name绑定，
给"添加按钮"绑定点击事件
代码语言：javascript复制<input type="button" value="添加" class="btn btn-primary" @click='add'>
添加效果
添加后将输入框内容置空
3.删除记录
删除记录的实现逻辑:点击删除链接，获取要删除记录的id，然后调用数组的splice方法来移除记录，
注意：方法名称不要使用delete!
数组常用的循环方法比较
循环方法 | 说明 |
|---|---|
forEach | 不可终止循环 |
some | 返回true终止循环 |
findIndex | 返回true终止循环，返回满足添加的索引 |
filter | 过滤数组，返回过滤后的数组 |
通过数组的some方法来循环判断
或者通过findIndex方法来获取满足条件的下标，然后再删除数据:
删除效果
4.关键字查询
关键字查询也就是根据用户的输入返回满足条件的信息， 添加搜索框
然后v-for中循环的信息就不能是直接操作list数据，而应该是调用方法返回的信息
添加search方法
通过foreach来实现效果
代码语言：javascript复制search(keywords){
// 保存新的数组
var newList = []
this.list.forEach(item => {
// 判断循环的记录是否包含的查询的关键字
if(item.name.indexOf(keywords) != -1){
// 将循环的记录添加到新的数组中
newList.push(item)
}
})
// 返回数组信息
return newList
}
通过filter来实现效果
搞定！
数组常用的循环方法比较
循环方法 | 说明 |
|---|---|
forEach | 不可终止循环 |
some | 返回true终止循环 |
findIndex | 返回true终止循环，返回满足添加的索引 |
filter | 过滤数组，返回过滤后的数组 |
