## 列表功能举例 ### 步骤 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
编号： 名称：
编号 名称 创建时间 操作
列表无数据
{{item.id}} {{item.name}} {{item.ctime}} 删除
``` ### 步骤 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
编号： 名称：
编号 名称 创建时间 操作
列表无数据
{{item.id}} {{item.name}} {{item.ctime}} 删除
``` ### 步骤 5：按条件筛选item 现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说： - 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的。 - 现在， 我们在使用`v-for`进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即`v-for="item in search(keywords)"`。 在 search(keywords) 方法中，为了获取 list 数组中匹配的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 （说明，匹配不到任何字符串） ``` 上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。 **方式二**： ### 步骤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中已经删除了，我们需要自定义过滤器。