## 列表功能举例
### 步骤 1:列表功能
完整的代码如下:
```html
Document
编号 |
名称 |
创建时间 |
操作 |
{{item.id}} |
{{item.name}} |
{{item.ctime}} |
删除 |
```
**代码分析**:数据是存放在data的list中的,将data中的数据通过`v-for`遍历给表格。
上方代码运行的效果:
![](http://img.smyhvae.com/20180401_1517.png)
### 步骤 2:无数据时,增加提示
如果list中没有数据,那么表格中就会只显示表头``,这样显然不太好看。
为此,我们需要增加一个`v-if`判断:当数据为空时,显示提示。如下:
```html
|
列表无数据 |
```
代码解释:`colspan="4"`指的是让当前这个``横跨4个单元格的位置。如下:
![](http://img.smyhvae.com/20180401_1535.png)
### 步骤 3:item的添加
具体实现步骤如下:
(1)用户填写的数据单独存放在data属性里,并采用`v-model`进行双向绑定。
(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属性去匹配传进来的id
//如果是则返回true ;否返回false,继续下面的一条数据的遍历,以此类推
return item.id ==id; //如果返回true,那么findIndex方法会将这个item对应的index
});
```
当item被删除后,v-for会被自动调用。
完整版代码:
```html
Document
```
### 步骤 5:按条件筛选item
现在要求实现的效果是,在搜索框输入关键字 keywords,列表中仅显示匹配出来的内容。也就是说:
- 之前, v-for 中的数据,都是直接从 data 上的list中直接渲染过来的。
- 现在, 我们在使用`v-for`进行遍历显示的时候,不能再遍历全部的 list 了;我们要自定义一个 search 方法,同时,把keywords作为参数,传递给 search 方法。即`v-for="item in search(keywords)"`。
在 search(keywords) 方法中,为了获取匹配的item,我们可以有两种方式实现。如下。
**方式一:**
```javascript
search(keywords) { // 根据关键字,进行数据的搜索,返回匹配的item
//实现方式一:通过 indexOf() 进行匹配。
var newList = [];
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList
}
```
上方代码中, 我们要注意 indexOf(str) 的用法。举例如下:
```javascript
var str = 'smyhvae';
console.log(str.indexOf('s')); //打印结果:0
console.log(str.indexOf('')); //打印结果:0。(说明,即使去匹配空字符串,也是返回0)
console.log(str.indexOf('h')); //打印结果:3
console.log(str.indexOf('x')); //打印结果:-1 (说明,匹配不到任何字符串)
```
### 步骤6
在 Vue 1.0版本中,可以通过`filterBy`这个api进行过滤。
如果item是简单数据类型,可以这样筛选:
```html
```
上方代码的意思是:找到所有item中包含`hello`的指定item。
如果item是一个对象,比如:
```javascript
list: [{ id: 1, name: '奔驰', ctime: new Date }, { id: 2, name: '大众', ctime: new Date }],
```
上面的list数据中,我要去过滤匹配item中的name属性,可以这样筛选:
```html
```
但`filterBy`这种系统过滤器只是Vue1.0中的api,在Vue2.0中已经删除了,我们需要自定义过滤器。