vue快速入门(十二)v-key索引标志

注释很详细,直接上代码

上一篇

新增内容

  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>

效果演示

在这里插入图片描述

下一篇

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Redis】持久化

文章目录 一、RDB1.1、RDB的自动备份与手动备份1.1.1、自动备份1.1.2、手动备份 1.2、RDB优点1.3、RDB缺点1.4、RDB快照1.5、RDB优化配置项 二、AOF2.1、AOF工作流程2.2、AOF写回策略2.3、MP-AOF实现2.4、AOF优缺点2.5、AOF重写机制 三、RDBAOF混合持久化3.1、数据恢复顺序和加…

【JavaSE】接口 详解(下)

前言 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 接口实例运用 代码举例理解 比较对象的年龄 比较对象的姓名 利用冒泡排序实现Array.sort 年龄比较器 姓名比较器 比较示例测试 clone接口 浅拷贝和深拷贝 浅…

C语言 | Leetcode C语言题解之第17题电话号码的字母组合

题目&#xff1a; 题解&#xff1a; char phoneMap[11][5] {"\0", "\0", "abc\0", "def\0", "ghi\0", "jkl\0", "mno\0", "pqrs\0", "tuv\0", "wxyz\0"};char* digits…

BERT论文解读及情感分类实战

文章目录 简介BERT文章主要贡献BERT模型架构技术细节任务1 Masked LM&#xff08;MLM&#xff09;任务2 Next Sentence Prediction (NSP)模型输入 下游任务微调GLUE数据集SQuAD v1.1 和 v2.0NER 情感分类实战IMDB影评情感数据集数据集构建模型构建超参数设置训练结果注意事项 简…

python把视频按帧转化为图片并保存

参考链接&#xff1a;pythonopencv 将.mp4视频每一帧转为jpg图片_将mp4每一帧转化为图片-CSDN博客 from cv2 import VideoCapture from cv2 import imwrite# 定义保存图片函数 # image:要保存的图片名字 # addr&#xff1b;图片地址与相片名字的前部分 # num: 相片&#xff0c…

系统架构最佳实践 -- 智慧图书管理系统架构设计

随着数字化时代的到来&#xff0c;智慧图书管理系统在图书馆和机构中扮演着重要的角色。一个优秀的图书管理系统不仅需要满足基本的借阅管理需求&#xff0c;还需要具备高效的性能、良好的扩展性和稳定的安全性。本文将讨论智慧图书管理系统的架构设计与实现&#xff0c;以满足…

Debian安装1panel管理面板教程-最新

1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。 1Panel面板是一个强大的服务器管理工具&#xff0c;它通过提供一站式管理、易于使用的界面、高度的可定制性、安全可靠的性能、强大的扩展性以及活跃的社区支持&#xff0c;为用户提供了一个高效、便捷的管理解决方案…

test4101

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

Vue项目自动注入less、sass、scss、stylus全局变量

一、Vue2项目 // vue.config.js const path require(path) module.exports {css: {loaderOptions: {// 给 sass-loader 传递选项sass: {// / 是 src/ 的别名// 所以这里假设有 src/assets/style/var.sass 这个文件// 注意&#xff1a;在 sass-loader v8 中&#xff0c;这个选…

QT_数据库

查看QT支持的数据库类型 主要代码: QStringList sl QSqlDatabase::drivers(); foreach(QString str, sl) {qDebug() << str; }程序输出: "QSQLITE" "QODBC" "QODBC3" "QPSQL" "QPSQL7"如果想使用其他数据库&#…

提问cpp之编译单元

提问cpp之编译单元 提问1&#xff1a;回答1&#xff1a;为什么模板都写在头文件里&#xff0c;写在.cpp文件会怎样&#xff1f;头文件中直接定义int a会有什么问题&#xff1f;为什么重复定义会出问题&#xff0c;这是谁判断的&#xff1f; 提问2&#xff1a;回答2&#xff1a;…

featup入坑笔记

一、新建环境 在conda中建立一个虚拟环境featup&#xff0c; conda create -n featup python3.9 二、开始配置&#xff1a; 我是先下载了FeatUp&#xff0c;之后 pip install -e . -i https://mirrors.aliyun.com/pypi/simple/ 但是&#xff0c;突然出错了&#xff0c;说无法…

leetcode2529-正整数和负整数的最大计数

题目: 给你一个按 非递减顺序 排列的数组 nums &#xff0c;返回正整数数目和负整数数目中的最大值。 换句话讲&#xff0c;如果 nums 中正整数的数目是 pos &#xff0c;而负整数的数目是 neg &#xff0c;返回 pos 和 neg二者中的最大值。 注意&#xff1a;0 既不是正整数…

MyBatis输出映射

1 resultType resultType: 执行 sql 得到 ResultSet 转换的类型&#xff0c;使用类型的完全限定名或别名。如果返回的是集合&#xff0c;设置的是集合元素的类型&#xff0c;而不是集合本身。resultType 和 resultMap&#xff0c;不能同时使用。 1.1 输出简单类型 案例&…

记Kubernetes(k8s):访问 Prometheus UI界面:Warning: Error fetching server time

记Kubernetes&#xff08;k8s&#xff09;&#xff1a;访问 Prometheus UI界面:Warning: Error fetching server time 1、报错详情2、解决3、再次访问 PrometheusUI界面 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、报错详情 Warning:…

软件杯 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的人体跌倒检测算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满…

MyBatis事务管理

MyBatis的事务管理是由TransactionFactory和Transaction两个接口定义的&#xff0c;TransactionFactory负责生成Transaction&#xff0c;这是一个典型的工厂模式。 官方提供了事务管理的两种模式&#xff1a; Managed&#xff1a;对应ManagedTransactionFactory和ManagedTran…

第四百四十一回 再谈flutter_native_splash包

文章目录 1. 知识回顾2. 使用方法3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结 我们在上一章回中介绍了"overlay_tooltip简介"相关的内容&#xff0c;本章回中将 再谈flutter_native_splash包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 知识回顾 我…

视频插针调研

视频插针 1、评估指标2、准确度3、实时4、视频流处理3、实时RIFE视频插帧测试 1、评估指标 参考&#xff1a;https://blog.csdn.net/weixin_43478836/article/details/104159648 https://blog.csdn.net/weixin_43605641/article/details/118088814 PSNR和SSIM PSNR数值越大表…

面试准备 集合 List

ArrayList 底层实现 使用Object[] 动态数组进行存储 特性 支持存储null值非线程安全支持快速访问 初始化方法 无参–返回一个空的列表&#xff08;DEFAULTCAPACITY_EMPTY_ELEMENTDATA&#xff09;指定初始容量&#xff1a; new ArrayList(20);指定集合 new ArrayList(col…