vue专项练习

news2024/11/25 16:43:13

一、循环实现一个列表的展示及删除功能

1.1 列表展示

1、背景：

完成一个这样的列表展示。使用v-for 循环功能

id接口名称测试人员项目名项目ID描述信息创建时间用例数
1首页喵酱发财项目a1case的描述信息2019/11/6 14:50:3010
2个人中心张三发财项目a1case的描述信息2019/11/7 14:50:3011
3tab李四发财项目a1case的描述信息2019/11/8 14:50:3012
4列表喵酱美梦项目2bcase的描述信息2019/11/9 14:50:3013
5我的喵酱美梦项目2bcase的描述信息2019/11/10 14:50:3014
6你的喵酱美梦项目2bcase的描述信息2019/11/11 14:50:3015
7大家的张三美梦项目2bcase的描述信息2019/11/12 14:50:3016

 2、实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="mytable">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>id</th>
					<th>接口名称</th>
					<th>测试人员</th>
					<th>项目名</th>
					<th>项目id</th>
					<th>描述信息</th>
					<th>创建时间</th>
					<th>用例数</th>
				</tr>
				<tr v-for="item in list" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.tester}}</td>
					<td>{{item.project}}</td>
					<td>{{item.project_id}}</td>
					<td>{{item.desc}}</td>
					<td>{{item.create_time}}</td>
					<td>{{item.testcases}}</td>

				</tr>
			</table>

		</div>



		<script type="text/javascript">
			var 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>
</html>

1.2 列表删除的功能

给上面的列表，添加一个删除功能，绑定事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="mytable">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>id</th>
					<th>接口名称</th>
					<th>测试人员</th>
					<th>项目名</th>
					<th>项目id</th>
					<th>描述信息</th>
					<th>创建时间</th>
					<th>用例数</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in list" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.tester}}</td>
					<td>{{item.project}}</td>
					<td>{{item.project_id}}</td>
					<td>{{item.desc}}</td>
					<td>{{item.create_time}}</td>
					<td>{{item.testcases}}</td>
					<td><button @click="del(item.id)">删除</button></td>

				</tr>
			</table>

		</div>



		<script type="text/javascript">
			var 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.list=this.list.filter(function(item,index){
							return item.id != id
						})
					},
				},

			})
		</script>
	</body>
</html>

注意，列表删除功能的两种方式。

方式一 通过 filter过滤实现

				methods: {
					
					del:function(id) {
						this.list=this.list.filter(function(item,index){
							return item.id != id
						})
					},
				},

注意，function（item,index)。 item是列表中，每一个元素，index是索引，这个索引是固定写法。

方式二 通过删除索引实现

				methods:{
					del:function(id){
						// 查找要删除的数据索引值
						let index = this.lists.findIndex(function(item){
							return item.id==id
						})
						// 根据数组的索引去删除数组中对应的数据
						this.lists.splice(index,1)
						
					}
					
				}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/403354.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis学习(13)之Lua脚本【环境准备】

Redis学习(13)之Lua脚本【环境准备】

文章目录一 Lua入门环境准备1.1 Lua简介1.2 Linux 系统安装Lua1.2.1 Lua 下载1.2.2 Lua 安装1.3 Hello World1.3.1 命令行模式1.3.2 脚本文件模式1.3.3 两种脚本运行方式1.4 Win安装Lua1.4.1 LuaForWindows的安装1.4.2 SciTE修改字体大小1.4.3 SciTE中文乱码1.4.4 SciTE快捷键工…
阅读更多...
aws ecs 使用copilot快速创建ecs集群环境并部署服务

aws ecs 使用copilot快速创建ecs集群环境并部署服务

参考资料 https://github.com/aws/copilot-cli https://aws.github.io/copilot-cli/ https://github.com/aws-samples/amazon-ecs-cli-sample-app https://ecsworkshop.com/microservices/frontend/#deploy-frontend-0 ecs的服务部署从头开始需要进行以下操作 创建vpc等网…
阅读更多...
JS中的事件、DOM操作

JS中的事件、DOM操作

一、事件1.1 事件介绍事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等1.2 事件绑定方式事件要想发生,就得将事件和标签先绑定一个完整的事件有三部分事件源(标签)什么事(事件)响应(动作效果)事件绑定,其实就是事件和标签绑定方式1: 事件源,事件…
阅读更多...
IBM Semeru Windows 下的安装 JDK 17

IBM Semeru Windows 下的安装 JDK 17

要搞清楚下载那个版本&#xff0c;请参考文章&#xff1a;来聊聊 OpenJDK 和 JVM 虚拟机下载地址semeru 有认证版和非认证版&#xff0c;主要是因为和 OpenJ9 的关系和操作系统的关系而使用不同的许可证罢了&#xff0c;本质代码是一样的。在 Windows 下没有认证版&#xff0c;…
阅读更多...
[计算机组成原理(唐朔飞 第2版)]第三章 系统总线（学习复习笔记）

[计算机组成原理(唐朔飞 第2版)]第三章 系统总线（学习复习笔记）

3.1 总线的基本概念 计算机系统的五大部件之间的互连方式有两种 各部件之间使用单独的连线&#xff0c;称为分散连接将各部件连到一组公共信息传输线上&#xff0c;称为总线连接 总线是连接多个部件的信息传输线&#xff0c;是各部件共享的传输介质。 当多个部件与总线相连时&…
阅读更多...
【java基础】LinkedList源码解析

【java基础】LinkedList源码解析

文章目录基本介绍构造器基础方法linkFirstlinkLastlinkBeforeunlinkFirstunlinkLastunlinknodeindexOf方法分析总结基本介绍 在java中&#xff0c;LinkedList就是使用双向链表存储元素&#xff0c;既然是链表&#xff0c;那么也就知道了该数据结构擅长添加和删除。对于需要频繁…
阅读更多...
线程等待/休眠/状态及 Runnable 和 Callable 的简单使用及原理

线程等待/休眠/状态及 Runnable 和 Callable 的简单使用及原理

关于线程和进程的基本概念☛操作系统中线程和进程的概念理解 这篇文章已经有了很详细的解释, 接下来主要来讲讲线程等待与线程休眠 / 线程的几种状态 / Runnable 和 Callable 与 Thread 的概念和区别及 Executor 框架是什么样的. 关于线程1 线程等待与线程休眠2 线程一共有哪些…
阅读更多...
[洛谷-P3698][CQOI2017]小Q的棋盘

[洛谷-P3698][CQOI2017]小Q的棋盘

一、问题 题目描述 小 Q 正在设计一种棋类游戏。 在小 Q 设计的游戏中&#xff0c;棋子可以放在棋盘上的格点中。某些格点之间有连线&#xff0c;棋子只能在有连线的格点之间移动。整个棋盘上共有 VVV 个格点&#xff0c;编号为 0,1,2,⋯,V−10,1,2,\cdots, V- 10,1,2,⋯,V−…
阅读更多...
【C++知识点】C++11 常用新特性总结

【C++知识点】C++11 常用新特性总结

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;C/C知识点 &#x1f4e3;专栏定位&#xff1a;整理一下 C 相关的知识点&#xff0c;供大家学习参考~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;…
阅读更多...
EasyRcovery16免费的电脑照片数据恢复软件

EasyRcovery16免费的电脑照片数据恢复软件

电脑作为一种重要的数据储存设备&#xff0c;其中保存着大量的文档&#xff0c;邮件&#xff0c;视频&#xff0c;音频和照片。那么&#xff0c;如果电脑照片被删除了怎么办&#xff1f;今天小编给大家介绍&#xff0c;误删除的照片从哪里可以找回来&#xff0c;误删除的照片如…
阅读更多...
win10打印机拒绝访问解决方法

win10打印机拒绝访问解决方法

一直以来,在安装使用共享打印机打印一些文件的时候&#xff0c;会遇到错误提示&#xff1a;“无法访问.你可能没有权限使用网络资源。请与这台服务器的管理员联系”的问题&#xff0c;那为什么共享打印机拒绝访问呢&#xff1f;别着急&#xff0c;下面为大家带来相关的解决方法…
阅读更多...
mysql时区问题

mysql时区问题

设置mysql容器时间与服务器时间一致 问题背景&#xff1a; 今天测试发现一个问题&#xff0c;时间不一致&#xff0c;当工单入库时&#xff0c;其创建时间和更新时间应该是一样的&#xff0c;即使不一样最多只会错几秒的时间&#xff1b;实际上两个时间相差的大概8小时&#…
阅读更多...
青少年学AI，Amazon DeepRacer有何魔力？

青少年学AI，Amazon DeepRacer有何魔力？

导读&#xff1a;北京名校中学生可以根据兴趣开发AI模型甚至发表论文&#xff0c;偏远地区的校长还在犹豫“人工智能教育&#xff0c;中考会考吗&#xff1f;高考会加分吗&#xff1f;”教育鸿沟由来已久&#xff0c;绝非仅靠某些企业或教育机构可以扭转&#xff0c;但我们至少…
阅读更多...
maven仓库的配置

maven仓库的配置

下载 官网下载&#xff1a;https://maven.apache.org/download.cgi 2. 配置maven环境 右键电脑 ->属性 -> 高级系统设置 -> 环境变量 -> 系统变量-新建 变量名&#xff1a;MAVEN_HOME 变量值为maven的文件安装地址 编辑Path系统变量 新建&#xff1a;%MAVE…
阅读更多...
132.《render-props, Hoc，自定义hooks 详解》

132.《render-props, Hoc，自定义hooks 详解》

文章目录render-props 模式props 方式children 方式(推荐)Hoc&#xff08;高阶组件&#xff09;使用步骤示例props 丢失解决方案自定义 hook1.只执行一次2.防抖hook高阶组件与自定义hook有什么区别相同点不同点React 中代码逻辑复用有三种方式&#xff0c;render-props, Hoc&am…
阅读更多...
Altium Designer(AD)软件使用记录05-PCB叠层设计

Altium Designer(AD)软件使用记录05-PCB叠层设计

目录Altium Designer(AD)软件使用记录05-PCB叠层设计一、正片层和负片层的介绍1、正片层(Signal)2、负片层(Plane)3、内电层的分割实现二、正片层和负片层的内缩设计1、负片设置内缩20H原则2、正片铺铜设置内缩1、设置规则2、重新铺铜三、AD的层叠设计四、叠层设计需要注意的问…
阅读更多...
计算机组成原理_总线标准

计算机组成原理_总线标准

计算机组成原理总目录总线标准 总线标准是系统与各模块、模块与模块之间的一个互连的标准&#xff0c;就像我们用汉语来相互交流一样。 1. 系统总线 ISA总线的扩展插槽&#xff0c;其颜色一般为黑色&#xff0c;比PCI接口插槽要长些&#xff0c;位于主板的最下端。 可插接显卡&…
阅读更多...
Java中的深克隆与浅克隆

Java中的深克隆与浅克隆

浅克隆&#xff1a; 实现Cloneable接口即可实现&#xff0c;浅克隆只对象内部的基础数据类型&#xff08;包括包装类&#xff09;被克隆&#xff0c;引用数据类型&#xff08;负责对象&#xff09;会被使用引用的方式传递。 简单来说&#xff0c;就是浅克隆属性如果是复杂对象…
阅读更多...
java多线程（二五）ReentrantReadWriteLock读写锁详解（1）

java多线程（二五）ReentrantReadWriteLock读写锁详解（1）

一、读写锁简介 现实中有这样一种场景&#xff1a;对共享资源有读和写的操作&#xff0c;且写操作没有读操作那么频繁。在没有写操作的时候&#xff0c;多个线程同时读一个资源没有任何问题&#xff0c;所以应该允许多个线程同时读取共享资源&#xff1b;但是如果一个线程想去…
阅读更多...
有关3dmax对齐技巧的那些事

有关3dmax对齐技巧的那些事

建模操作中&#xff0c;对齐是非常常用的一个功能&#xff0c;用好这个对齐功能能够事半功倍&#xff0c;好处我不说了&#xff0c;下面我们这篇博文就来说说3dmax对齐技巧的相关的内容。 文章目录一、点对齐1、样条线中的点对齐2、多边形中的点对齐二、线对齐三、面对齐四、物…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023