## 列表功能举例 ### 步骤 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
编号: 名称:
编号 名称 创建时间 操作
列表无数据
{{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属性来判断这个item是否是上面id中对应的数据, //如果是则返回true ;否返回false,继续下面的一条数据的遍历,以此类推 return item.id ==id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受 }); ```