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…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...