vue快速入门（十二）v-key索引标志
注释很详细，直接上代码
新增内容
- v-key的使用场景
- 数组筛选器的使用
源码
<!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索引标志
注释很详细，直接上代码 新增内容 v-key的使用场景数组筛选器的使用 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-…...
智能网联汽车自动驾驶数据记录系统DSSAD数据配置
目录 第一章 数据配置一般要求 第二章 数据配置文件中的文件描述 第三章 数据配置文件中的数据描述 第四章 数据配置文件中的数据字典 表A.1 数据字典格式定义 第一章 数据配置一般要求 数据配置文件数据内容应为可读的十进制数据。 数据配置文件应以文件的形式存储在自动驾驶…...
linux知识点
绝对路径用什么符号表示？当前目录、上层目录用什么表示？主目录用什么表示? 切换目录用什么命令 绝对路径： 如/etc/init.d当前目录和上层目录： ./ …/主目录： ~/切换目录： cd 怎么查看当前进程？…...
微信小程序实现滚动标签
使用scroll-view标签可实现组件滚动标签 1、list中 list.wxml代码如下: <!--pages/list/list.wxml--> <navigation-bartitle"小程序" back"{{false}}"color"black" background"#FFF"></navigation-bar><scroll-…...
大语言模型上下文窗口初探（下）
由于篇幅原因，本文分为上下两篇，上篇主要讲解上下文窗口的概念、在LLM中的重要性，下篇主要讲解长文本能否成为LLM的护城河、国外大厂对长文本的态度。 3、长文本是护城河吗？ 毫无疑问，Kimi从一开始就用“长文本”占领…...
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# 用户…...
2.网络编程-HTTP和HTTPS
目录 HTTP介绍 HTTP协议主要组成部分 GET 和 POST有什么区别 常见的 HTTP 状态码有哪些 http状态码100 HTTP1.1 和 HTTP1.0 的区别有哪些 HTTPS 和 HTTP 的区别是什么 HTTP2 和 HTTP1.1 的区别是什么 HTTP3 和 HTTP2 的区别是什么 HTTPS的请求过程 对称加密和非对称…...
MTK i500p AIoT解决方案
一、方案概述 i500p是一款强大而高效的AIoT平台，专为便携式、家用或商用物联网应用而设计，这些应用通常需要大量的边缘计算，需要强大的多媒体功能和多任务操作系统。该平台集成了Arm Cortex-A73 和 Cortex-A53 的四核集群，工作频…...
ES入门十四：分词器
我们存储到ES中数据大致分为以下两种： 全文本，例如文章内容、通知内容精确值，如实体Id 在对这两类值进行查询的时候，精确值类型会比较它们的二进制，其结果只有相等或者不想等。而对全文本类型进行等值比较是不太实现…...
汇编——SSE打包整数
SSE也可以进行整数向量的加法，示例如下： ;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",…...
动态规划（2）
动态规划（2） 文章目录 动态规划（2）1、聪明的寻宝人2、基因检测3、药剂稀释4、找相似串 1、聪明的寻宝人 #include <iostream> using namespace std; void MaxValue(int values[], int weights[], int n, int m) {int dp[21…...
JetBrains IDE 2024.1 发布 - 开发者工具
JetBrains IDE 2024.1 (macOS, Linux, Windows) - 开发者工具 CLion, DataGrip, DataSpell, Fleet, GoLand, IntelliJ IDEA, PhpStorm, PyCharm, Rider, RubyMine, WebStorm 请访问原文链接：JetBrains IDE 2024.1 (macOS, Linux, Windows) - 开发者工具࿰…...
C++ 构造函数中的参数顺序
描述： 未初始化的参数必须在初始化参数之前 正确 ✓ 写法： mother(const char* food, const char* lastName"无姓", const char* firstName "无名" ); 错误❌写法： mother(const char* lastName"无姓", …...
Git Flow困境逃脱指南
本来来自极狐GitLab 资源中心，原文链接：https://resources.gitlab.cn/articles/020183ba-cfc0-4917-b901-248acdcfc92f。 GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab ÿ…...
MySQL的sql_mode模式简介
前言 今天同事使用数据库时报错,排查问题时发现配置文件里的sql_mode配置被人注释了,所以通过查询资料对这个配置进行了下了解。 介绍 mysql为了支持在不同的环境下运行，允许我们给它设置不同的运行模式（sql_mode）。 不同的运行模式&#…...
性能优化-如何爽玩多线程来开发
前言 多线程大家肯定都不陌生，理论滚瓜烂熟，八股天花乱坠，但是大家有多少在代码中实践过呢？很多人在实际开发中可能就用用Async，new Thread()。线程池也很少有人会自己去建，默认的随便用用。在工作中大家对…...
非关系型数据库-----------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…...
使用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…...
【引子】C++从介绍到HelloWorld
C从介绍到HelloWorld 一、C的介绍1. 简介2. 应用场景3. C的标准4. C的运行过程 二、Visual Studio的安装1. 什么是Visual Studio2. Visual Studio的安装 三、完成HelloWorld1.…...
Django检测到会话cookie中缺少HttpOnly属性手工复现
一、漏洞复现 会话cookie中缺少HttpOnly属性会导致攻击者可以通过程序(JS脚本等)获取到用户的cookie信息，造成用户cookie信息泄露，增加攻击者的跨站脚本攻击威胁。 第一步：复制URL：http://192.168.43.219在浏览器打开，…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
postgresql|数据库|只读用户的创建和删除（备忘）
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题，无需引入，直接可…...