## 列表功能举例
### 步骤 1：列表功能
代码如下：
```html
Document
| 编号 |
名称 |
创建时间 |
操作 |
| {{item.id}} |
{{item.name}} |
{{item.ctime}} |
删除 |
```
**代码分析**：数据是存放在data的list中的，将data中的数据通过`v-for`遍历给表格。
上方代码运行的效果：
20180401_1517.png
### 步骤 2：无数据时，增加提示
如果list中没有数据，那么表格中就会只显示表头``，这样显然不太好看。
为此，我们需要增加一个`v-if`判断：当数据为空时，显示提示。如下：
```html
|
| 列表无数据 |
```
代码解释：`colspan="4"`指的是让当前这个``横跨4个单元格的位置。如下：
20180401_1535.png
### 步骤 3：item的添加
具体实现步骤如下：
（1）用户填写的数据单独存放在data属性里，并采用`v-module`进行双向绑定。
（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。
（3）将数据展示出来。`v-for`有个特点：当list数组发生改变后，vue.js就会自动调用`v-for`重新将数据生成，这样的话，就实现了数据的自动刷新。
代码如下：
```html
Document
```
### 步骤 4：item的删除
html部分：
```html
| 删除 |
```
js部分：
```javascript
delData: function (id) {
// 0 提醒用户是否要删除数据
if (!confirm('是否要删除数据?')) {
//当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
return;
}
// 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id
});
// 2.0 调用方法：list.splice(待删除的索引, 删除的元素个数)
this.list.splice(index, 1);
}
```
代码解释：`find()`和`findIndex()`是ES6中为数组新增的函数。详细解释如下：
```javascript
// 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function(item){
//根据item中的id属性来判断这个item是否是上面id中对应的数据，
//如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
});
```