vue专项练习
一、循环实现一个列表的展示及删除功能
1.1 列表展示
1、背景：
完成一个这样的列表展示。使用v-for 循环功能
| id | 接口名称 | 测试人员 | 项目名 | 项目ID | 描述信息 | 创建时间 | 用例数 |
| 1 | 首页 | 喵酱 | 发财项目 | a1 | case的描述信息 | 2019/11/6 14:50:30 | 10 |
| 2 | 个人中心 | 张三 | 发财项目 | a1 | case的描述信息 | 2019/11/7 14:50:30 | 11 |
| 3 | tab | 李四 | 发财项目 | a1 | case的描述信息 | 2019/11/8 14:50:30 | 12 |
| 4 | 列表 | 喵酱 | 美梦项目 | 2b | case的描述信息 | 2019/11/9 14:50:30 | 13 |
| 5 | 我的 | 喵酱 | 美梦项目 | 2b | case的描述信息 | 2019/11/10 14:50:30 | 14 |
| 6 | 你的 | 喵酱 | 美梦项目 | 2b | case的描述信息 | 2019/11/11 14:50:30 | 15 |
| 7 | 大家的 | 张三 | 美梦项目 | 2b | case的描述信息 | 2019/11/12 14:50:30 | 16 |
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)}}相关文章：
vue专项练习
一、循环实现一个列表的展示及删除功能 1.1 列表展示 1、背景： 完成一个这样的列表展示。使用v-for 循环功能 id接口名称测试人员项目名项目ID描述信息创建时间用例数1首页喵酱发财项目a1case的描述信息2019/11/6 14:50:30102个人中心张三发财项目a1case的描述信…...
【笔试题】百度+美团
发工资 链接：https://www.nowcoder.com/questionTerminal/e47cffeef25d43e3b16c11c9b28ac7e8 来源：牛客网 小度新聘请了一名员工牛牛, 每个月小度需要给牛牛至少发放m元工资(给牛牛发放的工资可以等于m元或者大于m元, 不能低于m)。 小度有一些钞票资金…...
【8.索引篇】
索引分类 索引和数据就是位于存储引擎中： 按「数据结构」分类：Btree索引、Hash索引、Full-text索引。按「物理存储」分类：聚簇索引（主键索引）、二级索引（辅助索引）。按「字段特性」分类&#…...
MySQL InnoDB存储引擎锁与事务实现原理解析（未完成）
InnoDB MySQL存储引擎是基于表的，也就是说每张表可以选择不同的存储引擎。 InnoDB存储引擎的表是索引组织的，也就是数据即索引。 存储引擎文件 InnoDB引擎会包含RedoLog重做日志文件和TableSpace表空间文件。 表空间文件 默认表空间文件（…...
P1683 入门（洛谷）JAVA
题目描述： 不是任何人都可以进入桃花岛的，黄药师最讨厌像郭靖一样呆头呆脑的人。所以，他在桃花岛的唯一入口处修了一条小路，这条小路全部用正方形瓷砖铺设而成。有的瓷砖可以踩，我们认为是安全的，而有的瓷砖…...
yocto编译烧录和脚本解析
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、初始化构建目录二、imx-setup-release.sh脚本解析三、编译单独编译内核四、烧录总结前言 本篇文章主要讲解如何在下载好源码之后进行编译和yocto的脚本解析…...
Proteus 8.15安装包安装教程
Proteus介绍Proteus的介绍Proteus8.15安装包Proteus8.15安装教程Proteus的介绍 Proteus是英国著名的EDA工具(仿真软件)，从原理图布图、代码调试到单片机与外围电路协同仿真，一键切换到PCB设计，真正实现了从概念到产品的完整设计。是世界上唯…...
Spring——AOP工作流程
AOP就是代理模式的开发简化 1.Spring容器启动 因为AOP是要将通知类作为一个bean对象交给spring进行管理的，还有经过通知类被增强的类。 此时还没有创建bean对象 2.读取所有切面配置中的切入点 在下面这段代码中，定义了两个切入点，但是只…...
、notify_one()、notify_all()的使用。)
c++11多线程之condition_variable、wait()、notify_one()、notify_all()的使用。
系列文章目录 文章目录系列文章目录前言一、基本概念1.1 std::condition_variable1.2 wait()函数1.2.1 wait()带第二个参数1.2.2 wait()不带第二个参数1.2.3 当其他线程用notify_one()或notify_all（）1.3 notify函数二、代码实例总结前言 C11多线程&…...
skywalking扩展实现 —— 监控数据的动态上报
把标题名整高大上一些，来掩盖需求的奇葩。 0. 目录1. 需求背景2. 需求描述3. 优势4. 实现4.1 扩展点4.2 配置项5. 优化6. 提醒7. 补充 - 关于微服务8. 参考1. 需求背景 过去一段时间，接手了一个迭代了数年的"基于微服务架构"搭建的产品。 自…...
【GoF 23】23种设计模式与OOP七大原则概述
1. 什么是GoF 23？ GoF 23也就是23种设计模式。1995年GoF（Gang of Four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，一共收录了23种设计模式，从此梳理了软件设计模式领…...
Java 日期时间
Java 日期时间是 Java 标准库中一个非常重要的部分，它提供了丰富的 API 来处理日期、时间以及日期时间。在 Java 应用程序中，我们经常需要处理日期时间相关的操作，例如计算两个日期之间的差、将日期时间转换为不同的时区等。在本篇文章中&…...
Face Forgery Suvery
文章目录Face ForgeryFace Forgery classAttribute ManipulationExpression SwapIdentity SwapEntire Face SynthesisFace Forgery DetectionLow-levelOn the Detection of Digital Face Manipulation(CVPR2020)High-levelProtecting World Leaders Against Deep FakesDetectin…...
案例学习--016 消息队列作用和意义
简介MQ全称为Message Queue, 是一种分布式应用程序的的通信方法，它是消费-生产者模型的一个典型的代表，producer往消息队列中不断写入消息，而另一端consumer则可以读取或者订阅队列中的消息。主要产品有：ActiveMQ、RocketMQ、Rabb…...
【MySQL】MySQL的锁机制
目录 概述 MyISAM 表锁 InnoDB行锁 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制（避免争抢）。 在数据库中，除传统的 计算资源（如 CPU、RAM、I/O 等）的争用以外，数据也是一种供许多用户共…...
HTML 背景
一个富有美感的背景会让站点看上去更加高级、更有吸引力。本篇为大家来的是 HTML 背景相关内容。 背景（Backgrounds） <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。 背景颜色（Bgcolor） 背景颜色属性将背景设…...
Lombok
文章目录简介原理安装常用Getter、SetterToStringEqualsAndHashCodeNonNullNoArgsConstructor、RequiredArgsConstructor、AllArgsConstructorDATABuilderLogvalCleanup简介 Project Lombok is a java library that automatically plugs into your editor and build tools, spi…...
Koa源码学习
前言 koa是一个非常流行的Node.js http框架。本文我们来学习下它的使用和相关源码 来自官网的介绍： Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。…...
一种延迟加载自定义元素的方法
您可能实际上并不需要所有这些；通常有一个更简单的方法。如果有意使用，此处显示的技术可能仍然对您的工具集有用。 为了保持一致性，我们希望我们的自动加载器也成为一个自定义元素——这也意味着我们可以通过 HTML 轻松配置它。但首先&#…...
Pytho经典面试题荟萃：第一期
目录 一、面试题 二、参考答案 解释器和编译器的区别 解释器 编译器 Python 的解释过程 Python 内存管理 Python 内存分配 引用计数 垃圾回收 其他内存管理技术 多重继承 多重继承带来的问题 命名冲突 菱形继承问题 解决多重继承带来的问题 方法重写 调用 su…...
注CO2驱替煤层气THM耦合模型与自定义PDE耦合固体力学
注co2驱替煤层气THM耦合模型 自定义pde耦合固体力学今天，我来分享一下关于CO2驱替煤层气的THM（热-水-力学）耦合模型的构建过程。这个模型听起来有点复杂，但其实拆开来理解，每一步都还挺有意思的。尤其是其中涉及的自定…...
LFM2.5-1.2B-Thinking-GGUFGPU算力：单卡支持4并发+32K上下文稳定推理
LFM2.5-1.2B-Thinking-GGUFGPU算力：单卡支持4并发32K上下文稳定推理 1. 平台概述 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型，专为低资源环境优化设计。该模型采用GGUF格式和llama.cpp运行时，提供了简洁易用的单页Web界…...
3D打印键帽革命：如何用开源模型实现机械键盘的个性化定制
3D打印键帽革命：如何用开源模型实现机械键盘的个性化定制 【免费下载链接】cherry-mx-keycaps 3D models of Chery MX keycaps 项目地址: https://gitcode.com/gh_mirrors/ch/cherry-mx-keycaps 机械键盘爱好者们是否曾为寻找完美键帽而苦恼？传统…...
ThinkPad 4G/5G 连网不支持 IPv6？一文教你判断与设置
很多用 ThinkPad 内置 4G/5G 模块上网的用户，在使用 IPv6 相关服务、测速或网络诊断时，会发现自己明明设备很新，却始终无法获取 IPv6 地址，甚至误以为电脑硬件不支持。尤其在办公、远程、云服务等场景，IPv6 支持与否直…...
手把手教你用Matlab/Simulink搭建VSG虚拟阻抗模型，搞定新能源并网振荡难题
新能源并网VSG虚拟阻抗控制实战：从Simulink建模到振荡抑制 电力电子工程师们正面临一个棘手难题——新能源并网系统中的宽频振荡。当构网型变流器（GFM）在强电网环境下运行时，次同步和超同步频段的负阻尼特性可能导致系统失稳。虚拟…...
【笔试真题】- 阿里系列-2026.03.25-算法岗
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 阿里系列-2026.03.25-算法岗 1. LYA 的同余构造 问题描述 说明：阿里系列近期多条业务线笔试题基本共用同一套公开机试，淘天、阿里云等方向都可参考本场。 …...
从单点到高可用：在Ubuntu 22.04上一步步将HBase 2.x升级为HA架构（含故障切换测试）
从单点到高可用：在Ubuntu 22.04上实现HBase 2.x高可用架构实战指南 当你的数据服务从测试环境走向生产环境，单点故障就成了悬在头顶的达摩克利斯之剑。想象一下凌晨三点被报警电话惊醒，只是因为唯一的HMaster节点宕机导致整个数据服务不可用—…...
NaViL-9B开源模型生态：HuggingFace模型卡+GitHub训练代码指引
NaViL-9B开源模型生态：HuggingFace模型卡GitHub训练代码指引 1. 平台简介 NaViL-9B是上海人工智能实验室发布的一款原生多模态大语言模型，支持纯文本问答和图片理解双重能力。作为开源社区的重要贡献，该模型已在HuggingFace平台发布模型卡&…...
WarcraftHelper全方位优化指南：解决魔兽争霸III现代适配难题
WarcraftHelper全方位优化指南：解决魔兽争霸III现代适配难题 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 当你在4K显示器上启动魔兽争霸…...
s2-pro效果展示：高保真语音生成——呼吸感、重音、语速变化细节还原
s2-pro效果展示：高保真语音生成——呼吸感、重音、语速变化细节还原 1. 专业级语音合成新标杆 s2-pro作为Fish Audio开源的专业级语音合成模型镜像，正在重新定义文本转语音的技术标准。不同于市面上常见的机械式语音合成，这款工具能够精准还…...