当前位置： 首页 > news >正文

vue快速入门（十二）v-key索引标志

news 文章来源：https://blog.csdn.net/m0_73756108/article/details/137055954 2024/10/25 14:32:31

注释很详细，直接上代码

新增内容

  1. v-key的使用场景
  2. 数组筛选器的使用

源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#all{margin: 100px auto;padding-bottom: 10px;width: 300px;height: auto;background: linear-gradient(rgba(4, 226, 242, 0.5),rgba(3, 255, 117, 0.5));border-radius: 20px;box-shadow: 15px 15px 30px rgba(0,0,0,0.5);}#title{text-align: center;font-size: 27px;font-family: 楷体;font-weight: 800;padding-top:20px;}#all ul{list-style: none;margin: 0px 30px 10px 30px;}#all ul li{margin: 30px 0;height: 35px;line-height: 35px;padding: 0 25px;}#all ul div{display: inline-block;}#start{width: 110px;}li{background-color: #ffffff77;border-radius: 10px;backdrop-filter: blur(5px);}button{/* 鼠标样式 */cursor: pointer;border-radius: 5px;border: none;/* 其实没啥很明显的效果，单纯是不知道写啥好了 */box-shadow: 5px 5px 20px rgba(13, 239, 198, 0.5);background-color: rgba(0,0,0,0);}</style>
</head>
<body><!-- 挂载点 --><div id="root"><div id="all"><div id="title">收复失地</div><ul><!-- 重点就是这个v-key索引，简写:key 我们会设为自己的id--><li v-for="(item,index) in areas" :key="item.id"><span>{{item.name}}</span><div id="start"><span v-for="(item_1,index_1) in item.difficulty">⭐</span></div><button @click="dis(item.id)">征讨</button></li></ul></div></div><!-- 导入vue的js代码 --><script src="./lib/vue2.js"></script><script>const app = new Vue({// Vue实例el: '#root',// 挂载点data: {// 数据areas:[{id:1,name:'蒙德',difficulty:1},{id:2,name:'璃月',difficulty:2},{id:3,name:'稻妻',difficulty:3},{id:4,name:'须弥',difficulty:4},{id:5,name:'枫丹',difficulty:5}]},methods: {// 方法dis(id){// filter: 根据条件，保留满足条件的对应项，得到一个新数组this.areas=this.areas.filter(item=>item.id!=id)}}})</script>
</body>
</html>

效果演示

在这里插入图片描述

相关文章：

vue快速入门（十二）v-key索引标志

注释很详细&#xff0c;直接上代码 新增内容 v-key的使用场景数组筛选器的使用 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-…...

编程日记 2024/4/8 11:21:04

智能网联汽车自动驾驶数据记录系统DSSAD数据配置

目录 第一章 数据配置一般要求 第二章 数据配置文件中的文件描述 第三章 数据配置文件中的数据描述 第四章 数据配置文件中的数据字典 表A.1 数据字典格式定义 第一章 数据配置一般要求 数据配置文件数据内容应为可读的十进制数据。 数据配置文件应以文件的形式存储在自动驾驶…...

编程日记 2024/4/8 11:20:02

linux知识点

绝对路径用什么符号表示&#xff1f;当前目录、上层目录用什么表示&#xff1f;主目录用什么表示? 切换目录用什么命令 绝对路径&#xff1a; 如/etc/init.d当前目录和上层目录&#xff1a; ./ …/主目录&#xff1a; ~/切换目录&#xff1a; cd 怎么查看当前进程&#xff1f;…...

编程日记 2024/4/8 11:19:01

微信小程序实现滚动标签

使用scroll-view标签可实现组件滚动标签 1、list中 list.wxml代码如下: <!--pages/list/list.wxml--> <navigation-bartitle"小程序" back"{{false}}"color"black" background"#FFF"></navigation-bar><scroll-…...

编程日记 2024/4/8 11:17:59

大语言模型上下文窗口初探（下）

由于篇幅原因&#xff0c;本文分为上下两篇&#xff0c;上篇主要讲解上下文窗口的概念、在LLM中的重要性&#xff0c;下篇主要讲解长文本能否成为LLM的护城河、国外大厂对长文本的态度。 3、长文本是护城河吗&#xff1f; 毫无疑问&#xff0c;Kimi从一开始就用“长文本”占领…...

编程日记 2024/4/8 11:16:58

Java整合ElasticSearch8.13

1、引入Jar包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency> 2、配置ES连接信息 spring:elasticsearch:# 地址uris: http://xxx:9200# 用户…...

编程日记 2024/4/8 11:14:56

2.网络编程-HTTP和HTTPS

目录 HTTP介绍 HTTP协议主要组成部分 GET 和 POST有什么区别 常见的 HTTP 状态码有哪些 http状态码100 HTTP1.1 和 HTTP1.0 的区别有哪些 HTTPS 和 HTTP 的区别是什么 HTTP2 和 HTTP1.1 的区别是什么 HTTP3 和 HTTP2 的区别是什么 HTTPS的请求过程 对称加密和非对称…...

编程日记 2024/4/8 11:13:54

MTK i500p AIoT解决方案

一、方案概述 i500p是一款强大而高效的AIoT平台&#xff0c;专为便携式、家用或商用物联网应用而设计&#xff0c;这些应用通常需要大量的边缘计算&#xff0c;需要强大的多媒体功能和多任务操作系统。该平台集成了Arm Cortex-A73 和 Cortex-A53 的四核集群&#xff0c;工作频…...

编程日记 2024/4/8 11:12:53

ES入门十四：分词器

我们存储到ES中数据大致分为以下两种&#xff1a; 全文本&#xff0c;例如文章内容、通知内容精确值&#xff0c;如实体Id 在对这两类值进行查询的时候&#xff0c;精确值类型会比较它们的二进制&#xff0c;其结果只有相等或者不想等。而对全文本类型进行等值比较是不太实现…...

编程日记 2024/4/8 11:10:51

汇编——SSE打包整数

SSE也可以进行整数向量的加法&#xff0c;示例如下&#xff1a; ;sse_integer.asm extern printfsection .datadummy db 13 align 16pdivector1 dd 1dd 2dd 3dd 4pdivector2 dd 5dd 6dd 7dd 8fmt1 db "Packed Integer Vector 1: %d, %d, %d, %d",…...

编程日记 2024/4/8 11:09:49

动态规划（2）

动态规划&#xff08;2&#xff09; 文章目录 动态规划&#xff08;2&#xff09;1、聪明的寻宝人2、基因检测3、药剂稀释4、找相似串 1、聪明的寻宝人 #include <iostream> using namespace std; void MaxValue(int values[], int weights[], int n, int m) {int dp[21…...

编程日记 2024/4/8 11:08:48

JetBrains IDE 2024.1 发布 - 开发者工具

JetBrains IDE 2024.1 (macOS, Linux, Windows) - 开发者工具 CLion, DataGrip, DataSpell, Fleet, GoLand, IntelliJ IDEA, PhpStorm, PyCharm, Rider, RubyMine, WebStorm 请访问原文链接&#xff1a;JetBrains IDE 2024.1 (macOS, Linux, Windows) - 开发者工具&#xff0…...

编程日记 2024/4/8 11:07:46

C++ 构造函数中的参数顺序

描述&#xff1a; 未初始化的参数必须在初始化参数之前 正确 ✓ 写法&#xff1a; mother(const char* food, const char* lastName"无姓", const char* firstName "无名" ); 错误❌写法&#xff1a; mother(const char* lastName"无姓", …...

编程日记 2024/4/8 11:03:42

Git Flow困境逃脱指南

本来来自极狐GitLab 资源中心&#xff0c;原文链接&#xff1a;https://resources.gitlab.cn/articles/020183ba-cfc0-4917-b901-248acdcfc92f。 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff…...

编程日记 2024/4/8 11:02:41

MySQL的sql_mode模式简介

前言 今天同事使用数据库时报错,排查问题时发现配置文件里的sql_mode配置被人注释了,所以通过查询资料对这个配置进行了下了解。 介绍 mysql为了支持在不同的环境下运行&#xff0c;允许我们给它设置不同的运行模式&#xff08;sql_mode&#xff09;。 不同的运行模式&#…...

编程日记 2024/4/8 11:01:40

性能优化-如何爽玩多线程来开发

前言 多线程大家肯定都不陌生&#xff0c;理论滚瓜烂熟&#xff0c;八股天花乱坠&#xff0c;但是大家有多少在代码中实践过呢&#xff1f;很多人在实际开发中可能就用用Async&#xff0c;new Thread()。线程池也很少有人会自己去建&#xff0c;默认的随便用用。在工作中大家对…...

编程日记 2024/4/8 11:00:39

非关系型数据库-----------Redis的主从复制、哨兵模式

目录 一、redis群集有三种模式 1.1主从复制、哨兵、集群的区别 1.1.1主从复制 1.1.2哨兵 1.1.3集群 二、主从复制 2.1主从复制概述 2.2主从复制的作用 ①数据冗余 ②故障恢复 ③负载均衡 ④高可用基石 2.3主从复制流程 2.4搭建redis主从复制 2.4.1环境准备 2.4…...

编程日记 2024/4/8 10:57:35

使用docx4j转换word为pdf处理中文乱码问题

word转pdf 实现方法 mavendocx4j版本自己酌情升级 实现方法 import org.docx4j.Docx4J; import org.docx4j.fonts.IdentityPlusMapper; import org.docx4j.fonts.Mapper; import org.docx4j.fonts.PhysicalFonts; import org.docx4j.openpackaging.packages.WordprocessingMLP…...

编程日记 2024/4/8 10:55:33

【引子】C++从介绍到HelloWorld

C从介绍到HelloWorld 一、C的介绍1. 简介2. 应用场景3. C的标准![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e3efb0f207f647729b92c0b5bcd4b330.png)4. C的运行过程 二、Visual Studio的安装1. 什么是Visual Studio2. Visual Studio的安装 三、完成HelloWorld1.…...

编程日记 2024/4/8 10:53:31

Django检测到会话cookie中缺少HttpOnly属性手工复现

一、漏洞复现 会话cookie中缺少HttpOnly属性会导致攻击者可以通过程序(JS脚本等)获取到用户的cookie信息&#xff0c;造成用户cookie信息泄露&#xff0c;增加攻击者的跨站脚本攻击威胁。 第一步&#xff1a;复制URL&#xff1a;http://192.168.43.219在浏览器打开&#xff0c;…...

编程日记 2024/4/8 10:51:28

2024数字城市建设博览会：一站式平台，满足多元需求

2024数字城市建设博览会&#xff1a;引领未来城市发展的风向标 2024年&#xff0c;一场前所未有的盛会——数字城市建设博览会暨交流大会&#xff0c;将在雄安这座未来之城拉开帷幕。本次大会不仅是数字经济全产业链的精英集结&#xff0c;更是一场汇聚了众多优质项目和丰富客…...

编程日记 2024/4/8 10:49:26

iOS 17.5系统或可识别并禁用未知跟踪器，苹果Find My技术应用越来越合理

苹果公司去年与谷歌合作&#xff0c;宣布将制定新的行业标准来解决人们日益关注的跟踪器隐私问题。苹果计划在即将发布的 iOS 17.5 系统中加入这项提升用户隐私保护的新功能。 科技网站 9to5Mac 在苹果发布的 iOS 17.5 开发者测试版内部代码中发现了这项反跟踪功能的蛛丝马迹…...

编程日记 2024/4/8 10:48:25

关于搭建elk日志平台

我这边是使用docker compose进行的搭建 所以在使用的时候 需要自行提前安装docker以及dockercompose环境 或者从官网下载对应安装包也可以 具体文章看下一章节&#xff1a;【ELK】搭建elk日志平台&#xff08;使用docker-compose&#xff09;&#xff0c;并接入springboot项目...

编程日记 2024/4/8 10:47:23

【全套源码教程】基于SpringBoot+MyBatis+Vue的流浪动物救助网站的设计与实现

目录 前言 需求分析 可行性分析 技术实现 后端框架&#xff1a;Spring Boot 持久层框架&#xff1a;MyBatis 前端框架&#xff1a;Vue.js 数据库&#xff1a;MySQL 功能介绍 前台界面功能介绍 动物领养及捐赠 宠物论坛 公告信息 商品页面 寻宠服务 个人中心 购…...

编程日记 2024/4/8 10:46:22

Word wrap在计算机代表的含义（自动换行）

“Word wrap”是一个计算机术语&#xff0c;用于描述文本处理器在内容超过容器边界时自动将超出部分转移到下一行的功能。在多种编程语言和文本编辑工具中&#xff0c;都有实现这一功能的函数或选项。 在编程中&#xff0c;例如某些编程语言中的wordwrap函数&#xff0c;能够按…...

编程日记 2024/4/8 10:44:20

室友打团太吵？一条命令让它卡死

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;更多干货&#xff0c;请关注专栏《网络安全自学教程》 SYN Flood 1、hping3实现SYN Flood1.1、主机探测1.2、扫描端…...

编程日记 2024/4/8 10:42:17

RabbitMQ3.13.x之八_RabbitMQ中数据文件和目录位置

RabbitMQ3.13.x之_RabbitMQ中数据文件和目录位置 文章目录 RabbitMQ3.13.x之_RabbitMQ中数据文件和目录位置1. 概述2. 覆盖位置1. 路径和目录名称限制2.所需的文件和目录权限 3. 环境变量4. Linux、macOS、BSD上的默认位置5. Windows上的默认位置6. 通用二进制构建默认值 1. 概…...

编程日记 2024/4/8 10:41:16

仿抖音短视频直播带货刷一刷商城社交电商源码系统小程序APP开发

系统功能介绍 一、短视频与社交功能 短视频浏览与互动 用户可以浏览仿抖音风格的短视频&#xff0c;包括评论、点赞、进入视频发布者的主页&#xff0c;以及加关注等功能。系统会显示用户关注的好友列表&#xff0c;方便用户快速查看好友发布的视频。用户还可以浏览同城视频&…...

编程日记 2024/4/8 10:39:14

Vue - 你知道Vue组件中的data为什么是一个函数吗

难度级别：中高级及以上 提问概率：80% 在Vue项目中，App.vue下的每个子组件都会生成一个单独的Vue实例对象，但这些子对象都是通过通过vue.extend方法创建而来的，也就是说我们平时在项目中所定义的Vue组件，都有一个相同的父类对象。这样也就…...

编程日记 2024/4/8 10:38:13

MUX VLAN

目录 原理概述 实验目的 实验内容 实验拓扑 1.基本配置 2.使用Hybrid端口实现网络需求 3.使用Mux VLAN实现网络需求 原理概述 在实际的企业网络环境中&#xff0c;往往需要所有的终端用户都能够访问某些特定的服务器&#xff0c;而用户之间的访问控制规则则比较复杂。在…...

编程日记 2024/4/8 10:37:12

武汉科技职业学院学费多少钱/赣州seo顾问

1、很久很久以前&#xff0c;Web 基本上就是文档的浏览而已&#xff0c; 既然是浏览&#xff0c;作为服务器&#xff0c; 不需要记录谁在某一段时间里都浏览了什么文档&#xff0c;每次请求都是一个新的HTTP协议&#xff0c; 就是请求加响应&#xff0c; 尤其是我不用记住是谁…...

编程日记 2024/10/25 13:18:23

58企业网站如何做/品牌营销策略论文

生而为人&#xff0c;请务必善良 matplotlib 实现数据可视化 前提&#xff1a;安装matplotlib库、numpy库及pandas库 实例目录&#xff1a; 1、线性图 2、直方图 3、条状图 4、多序列条状图 5、饼状图 6、极坐标图 7、散点图 8、3D曲面 9、3D散点 10、动画 基础图表…...

编程日记 2024/10/25 9:18:12

外贸行业有哪些工作岗位/武汉seo管理

二、选择题&#xff1a;本题共8小题&#xff0c;每小题给出的四个选项中&#xff0c;第14&#xff5e;17题只有一项符合题目要求&#xff0c;第18&#xff5e;21题有多项符合题目要求&#xff0e;全部选对的得6分&#xff0c;选对但不全的得3分&#xff0c;有错选或不选的得0分…...

编程日记 2024/10/25 8:48:51

南城微信网站建设/seo网站推广的主要目的

给2台服务器配置IP&#xff0c;掩码&#xff0c;网关打开交换机&#xff0c;进入全局模式&#xff0c;分别给每台交换机配置VLAN&#xff1b;设置VTY远程访问密码&#xff1b;&#xff08;交换机的默认IP ip default-gateway (192.168.1.254(这是根据你自己说设的VLAN决定的&am…...

编程日记 2024/10/25 7:34:24

网站免费建站系统 六/谷歌竞价广告

EJS(Embeded Javascript)&#xff0c;是类似JSP&#xff0c;eRuby之类的&#xff0c;将代码嵌入到HTML页面中&#xff0c;并动态执行的一种机制。在说EJS之前&#xff0c;我们要区分两个EJS&#xff0c;一个是基于nodeJS平台运行的EJS&#xff0c;另外一个是在浏览器执行的EJS。…...

编程日记 2024/10/25 7:20:17

上海网站建设那家好/今天的热搜榜

2019独角兽企业重金招聘Python工程师标准>>> 这两天在网上偶然间看到一句话通关了神浅拷贝...感觉比那些绕来绕去的定义什么的容易理解多了.. 浅复制&#xff1a;只复制对象本身&#xff0c;对象的成员只复制指针。深复制&#xff1a;在浅复制的基础上&#xff0c;同…...

编程日记 2024/10/25 3:14:08