自己做电视视频网站,协会网站方案,盐城做网站优化,电子商城网站设计实训报告一、循环实现一个列表的展示及删除功能
1.1 列表展示
1、背景#xff1a;
完成一个这样的列表展示。使用v-for 循环功能
id接口名称测试人员项目名项目ID描述信息创建时间用例数1首页喵酱发财项目a1case的描述信息2019/11/6 14:50:30102个人中心张三发财项目a1case的描述信…一、循环实现一个列表的展示及删除功能
1.1 列表展示
1、背景
完成一个这样的列表展示。使用v-for 循环功能
id接口名称测试人员项目名项目ID描述信息创建时间用例数1首页喵酱发财项目a1case的描述信息2019/11/6 14:50:30102个人中心张三发财项目a1case的描述信息2019/11/7 14:50:30113tab李四发财项目a1case的描述信息2019/11/8 14:50:30124列表喵酱美梦项目2bcase的描述信息2019/11/9 14:50:30135我的喵酱美梦项目2bcase的描述信息2019/11/10 14:50:30146你的喵酱美梦项目2bcase的描述信息2019/11/11 14:50:30157大家的张三美梦项目2bcase的描述信息2019/11/12 14:50:30162、实现代码 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script/headbodydiv idmytabletable border cellspacing cellpaddingtrthid/thth接口名称/thth测试人员/thth项目名/thth项目id/thth描述信息/thth创建时间/thth用例数/th/trtr v-foritem in list :keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtd{{item.tester}}/tdtd{{item.project}}/tdtd{{item.project_id}}/tdtd{{item.desc}}/tdtd{{item.create_time}}/tdtd{{item.testcases}}/td/tr/table/divscript typetext/javascriptvar vue new Vue({el: #mytable,data: {list: [{id: 1,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 首页,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 12,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 3,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 4,name: 登录接口_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 10,name: 登录接口_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 6,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 9,name: 登录接口_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}]}})/script/body
/html1.2 列表删除的功能
给上面的列表添加一个删除功能绑定事件。
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script/headbodydiv idmytabletable border cellspacing cellpaddingtrthid/thth接口名称/thth测试人员/thth项目名/thth项目id/thth描述信息/thth创建时间/thth用例数/thth操作/th/trtr v-foritem in list :keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtd{{item.tester}}/tdtd{{item.project}}/tdtd{{item.project_id}}/tdtd{{item.desc}}/tdtd{{item.create_time}}/tdtd{{item.testcases}}/tdtdbutton clickdel(item.id)删除/button/td/tr/table/divscript typetext/javascriptvar vue new Vue({el: #mytable,data: {list: [{id: 1,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 首页,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 12,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 3,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 4,name: 登录接口_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 10,name: 登录接口_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 6,name: 首页_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}, {id: 9,name: 登录接口_自动化测试平台项目,tester: 张三,project: 自动化测试平台项目,project_id: 1,desc: 登录接口,create_time: 2019-11-06 14:50:30,testcases: 9,}],},methods: {del:function(id) {this.listthis.list.filter(function(item,index){return item.id ! id})},},})/script/body
/html注意列表删除功能的两种方式。 方式一 通过 filter过滤实现 methods: {del:function(id) {this.listthis.list.filter(function(item,index){return item.id ! id})},},
注意functionitem,index)。 item是列表中每一个元素index是索引这个索引是固定写法。
方式二 通过删除索引实现 methods:{del:function(id){// 查找要删除的数据索引值let index this.lists.findIndex(function(item){return item.idid})// 根据数组的索引去删除数组中对应的数据this.lists.splice(index,1)}}
