备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题:回忆画廊
提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议
由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题,在这里只提供部分原题代码
本题目为:备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题:回忆画廊
题目:
经过运行环境运行之后的效果如下:
本题需要做的代码如下:
const List = {template: `<div class="photo-list"><el-row :gutter="20"><!--TODO:待修改代码 每一个 el-col 存放一个单张照片 --><el-col :span="6"><el-card><!-- TODO:待修改代码 目标 1 --><el-imagestyle="width: 100%; height: 200px"src="./images/1.png"><!-- TODO:待补充代码 目标 2 --></el-image><div style="padding: 14px;"><!--TODO:待修改代码 目标 1 --><span class="title">标题</span><div class="bottom clearfix"><!--TODO:待修改代码 目标 1 --><time class="time">2024-01-06</time></div></div></el-card></el-col></el-row></div>`,props:['photos'],setup(props) {let photos = props.photosreturn {photos};},
};
本题目标如下:
请在
components/List.js
文件中补全代码,具体需求如下:
- 根据
photos
数据(非固定数据)动态渲染el-col
,注意时间戳渲染为2022-01-12
格式,月份和日期不足 2 位数需要补 0。
photos
为图片对象数据,其中单个对象数据字段介绍如下:
字段 类型 描述 id Number 照片 ID url String 照片 URL title String 照片标题 date Number 照片日期,时间戳格式
- 当照片加载出错时,使用已定义的
photo-error
组件(已在PhotoError.js
中定义)作为兜底展示的组件。本项目中使用到的
element-plus
相关 API 如下:
Image
(图片)插槽:
插槽名 说明 error
自定义图片加载出错时,兜底展示的组件
说人话:
vue数据渲染;简单的对渲染数据的处理;时间戳;插槽的使用
本题作者想说
答案:
const List = {template: `<div class="photo-list"><el-row :gutter="20"><!--TODO:待修改代码 每一个 el-col 存放一个单张照片 --><el-col :span="6" v-for="item in photos" :key="item.id"><el-card><!-- TODO:待修改代码 目标 1 --><el-imagestyle="width: 100%; height: 200px":src="item.url"><!-- TODO:待补充代码 目标 2 --><template #error><photo-error></photo-error></template></el-image><div style="padding: 14px;"><!--TODO:待修改代码 目标 1 --><span class="title">{{item.title}}</span><div class="bottom clearfix"><!--TODO:待修改代码 目标 1 --><time class="time">{{new Date(item.date).getFullYear() + "-" + (Number(new Date(item.date).getMonth() + 1) < 10 ? "0" + Number(new Date(item.date).getMonth() + 1) : Number(new Date(item.date).getMonth() + 1)) + "-" + (new Date(item.date).getDate() < 10 ? "0" + new Date(item.date).getDate() : new Date(item.date).getDate())}}</time></div></div></el-card></el-col></el-row></div>`,props: ['photos'],setup(props) {let photos = props.photosreturn {photos};},
};
作者自我解释版:
const List = {template: `<div class="photo-list"><el-row :gutter="20"><!--TODO:待修改代码 每一个 el-col 存放一个单张照片 --><!-- 使用vue的方法遍历photos的数组,将数据循环出来 --><!-- 因为item内部有id,所以就不用传入index下标作为关键了 --><el-col :span="6" v-for="item in photos" :key="item.id"><el-card><!-- TODO:待修改代码 目标 1 --><!-- 渲染图片,要求动态渲染,所以加上":",并且加上item.url --><!-- 当有图片路径时,不必使用插值表达式 --><el-image style="width: 100%; height: 200px" :src="item.url"><!-- TODO:待补充代码 目标 2 --><!-- 插槽:通常使用template作为容器,并添加插槽名称 --><!-- 题目已定义photo-error,所以直接使用组件即可 --><template #error><photo-error></photo-error></template></el-image><div style="padding: 14px;"><!--TODO:待修改代码 目标 1 --><!-- 渲染标题,使用插值表达式即可 --><span class="title">{{item.title}}</span><div class="bottom clearfix"><!--TODO:待修改代码 目标 1 --><!-- 渲染日期,注意题目中要求的可不是单纯的渲染数据 --><!-- 通过简单的插值表达式可以看到,date的数据都是以时间戳的大数字形式展现的 --><time class="time">{{<!-- 创建一个日期实例,将item.date作为被实例的对象,从Date对象中提取年份部分,并加上"-"作为连接符号 -->new Date(item.date).getFullYear() + "-" + <!-- 创建一个日期实例,将item.date作为被实例的对象,从Date对象中提取月份部分,并转化为数字类型 --><!-- 注意getMonth()方法返回的月份是从0开始的(即0代表1月,1代表2月,以此类推),所以需要加1。 --><!-- 使用三元运算符判断是否小于10,如果小于10则加上一个0,如果不小于10则以原数据为准,最后加上一个"-"作为连接符号 -->(Number(new Date(item.date).getMonth() + 1) < 10 ? "0" + Number(new Date(item.date).getMonth() + 1) : Number(new Date(item.date).getMonth() + 1)) + "-" + <!-- 同理类似获取日期 -->(Number(new Date(item.date).getDate()) < 10 ? "0" + new Date(item.date).getDate() : new Date(item.date).getDate())}}</time></div></div></el-card></el-col></el-row></div>`,props: ['photos'],setup(props) {let photos = props.photosreturn {photos};},
};
感谢观看此篇文章,谢谢大家的支持,本片文章只是我自己学习的历程,有些写的不好地方欢迎大家交流改动。
长路漫漫,我们还需努力!
相关文章:
备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题:回忆画廊
提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议 由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题࿰…...
51 驱动 INA219 电流电压功率测量
文章目录 一、INA219简介二、引脚功能三、寄存器介绍1.配置寄存器 0x002.分流电压寄存器 0x013.总线电压寄存器 0x024.功率寄存器 0x035.电流寄存器 0x046.基准寄存器 0x05 四、IIC 时序说明1.写时序2.读时序 五、程序六、实验现象1.线路图2.输出数据 一、INA219简介 INA219是…...
JavaScript弹出框的使用:对话框、确认框、提示框、弹窗操作
关于 Window对象和 Document 对象的详细使用,系列文章: 《Window对象的常用属性和方法》 《Document对象的常用属性和方法:getElementById()、getElementsByName()、createElement()方法》 《Document获取元素并修改内容:getElementById()方法、value属性、innerHTML属性、…...
【设计模式】深入解析设计模式:门面模式(外观模式)的定义、优点和代码实现
门面模式(外观模式) SLF4J是门面模式的典型应用(但不仅仅使用了门面模式)。 门面模式定义 门面模式(Facade Pattern)又称为外观模式,提供了一个统一的接口,用来访问子系统中的一群…...
UE5学习笔记 FPS游戏制作34 触发器切换关卡
文章目录 搭建关卡制作触发器传送门显示加载界面 搭建关卡 首先搭建两个关卡,每个关卡里至少要有一个角色 制作触发器传送门 1 新建一个蓝图,父类为actor,命名为portal(传送门) 2 为portal添加一个staticMesh&#…...
UE5学习笔记 FPS游戏制作26 UE中的UI
文章目录 几个概念创建一个UI蓝图添加UI获取UI的引用 切换设计器和UI蓝图将UI添加到游戏场景锚点轴点slotSizeToContent三种UI数据更新方式(Text、Image)函数绑定属性绑定事件绑定 九宫格分割图片按钮设置图片绑定按下事件 下拉框创建添加数据修改样式常用函数 滚动框创建添加数…...
Spring Boot分布式项目重试实战:九种失效场景与正确打开方式
在分布式系统架构中,网络抖动、服务瞬时过载、数据库死锁等临时性故障时有发生。本文将通过真实项目案例,深入讲解Spring Boot项目中如何正确实施重试机制,避免因简单粗暴的重试引发雪崩效应。 以下是使用Mermaid语法绘制的重试架构图和决策…...
首个物业plus系列展 2025上海国际智慧物业博览会开幕
AI赋能服务升级!首个“物业plus”系列展 2025上海国际智慧物业博览会盛大开幕 3月31日,2025上海国际智慧物业博览会(简称“上海物博会”)在上海新国际博览中心N4馆隆重开幕。本届展会由广州旭杨国际展览有限公司主办,…...
《C++多线程下单例 “锁钥” 法则》
一、概述 本文章介绍了一段 C 代码,该代码实现了在多线程环境下的单例模式。单例模式确保一个类只有一个实例,并提供全局访问点。在多线程场景中,需要额外的同步机制来保证单例对象创建的线程安全性。单例模式在许多场景中都有重要应用&#…...
WEB或移动端常用交互元素及组件 | Axure / 元件类型介绍(表单元件、菜单和表格 、流程元件、标记元件)
文章目录 引言I Axure / 元件类型介绍基本元件表单元件菜单和表格流程元件标记元件II Axure 基础Axure / 常用功能介绍Axure / 常用元素实例Axure / 动态交互实例Axure / 常用设计分辨率推荐III Axure / 创建自己的元件库元件库作用元件库的创建及使用引言 I Axure / 元件类型介…...
开发环境解决Secure Cookie导致302重定向
问题现象与根源分析 故障现象 前端本地开发时(HTTP协议),调用接口返回302 Found状态码浏览器控制台警告:“Cookie被阻止,因为设置了Secure属性但未通过HTTPS传输”登录态无法保持,页面陷入重定向循环 技…...
华为三进制逻辑与高维量子计算的对比分析
此博客深入探讨华为三进制逻辑状态的技术意义,并与高维量子计算系统进行对比。文章将全面展开技术原理、实现机制、计算能力对比、未来应用前景等方面的内容。 目录 引言 华为三进制逻辑的创新意义 2.1 二进制逻辑的局限与历史探索 2.2 三进制逻辑的优势ÿ…...
网红指路机器人是否支持环境监测功能?
嘿呀,你可知道?如今的叁仟网红指路机器人那可太牛啦!它们可不单单局限于为行人指明方向,还纷纷兼职当起了 “环境小卫士”,为咱们的城市生活注入了前所未有的超智能便利。就拿那个依托叁仟智慧杆打造的数智指路机器人来…...
【进阶】vscode 中使用 cmake 编译调试 C++ 工程
基于 MSYS2 的 MinGW-w64 GCC 工具链与 CMake 构建系统,结合VSCode及其扩展插件( ms-vscode.cmake-tools),可实现高效的全流程C开发调试。既可通过 VSCode 可视化界面(命令面板、状态栏按钮)便捷完成配置、…...
突发,国行 iPhone 17,支持 eSIM
古人云“无心生大用”,往往你感到绝望的时候,转机就莫名其妙的来了。 根据供应链的最新消息,国行 iPhone 17 Air,有望用上 eSIM。 不仅如此,国产手机厂商,也计划推出类似iPhone 17 Air的超薄机型…...
红宝书第二十二讲:详解JavaScript类型化数组与二进制数据处理
红宝书第二十二讲:详解JavaScript类型化数组与二进制数据处理 资料取自《JavaScript高级程序设计(第5版)》。 查看总目录:红宝书学习大纲 一、为什么需要类型化数组? 普通JavaScript数组(Array࿰…...
Elasticsearch安全与权限控制指南
在Elasticsearch维护中,安全管理是保障数据合规性和集群稳定性的关键。本文将详细介绍用户与角色管理、索引/字段级权限控制、HTTPS加密通信、审计日志与合规性检查等核心安全实践,希望可以帮助你构建更安全的Elasticsearch环境。 1 用户与角色管理 1.1…...
SAP 学习笔记 - 系统移行业务 - MALSY(由Excel 移行到SAP 的收费工具)
以前有关移行,也写过一些文章,比如 SAP 学习笔记 - 系统移行业务 - Migration cockpit工具 - 移行Material(品目)-CSDN博客 SAP 学习笔记 - 系统移行业务 - Migration cockpit工具2 - Lot导入_sap cockpit-CSDN博客 SAP学习笔记…...
【群智能算法改进】一种改进的蜣螂优化算法IDBO[3](立方混沌映射Cubic、融合鱼鹰勘探策略、混合高斯柯西变异)【Matlab代码#92】
文章目录 【获取资源请见文章第5节:资源获取】1. 原始DBO算法2. 改进后的IDBO算法2.1 立方混沌映射Cubic种群初始化2.2 融合鱼鹰勘探策略2.3 混合高斯柯西变异 3. 部分代码展示4. 仿真结果展示5. 资源获取 【获取资源请见文章第5节:资源获取】 1. 原始DB…...
《异常检测——从经典算法到深度学习》30. 在线服务系统中重复故障的可操作和可解释的故障定位
《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …...
座舱与智驾“双轮驱动”,芯擎科技打造智能汽车“芯”标杆
在比亚迪、吉利、奇瑞等各大主机厂打响“全民智驾”的关键时期,以芯擎科技为代表中国芯片厂商开始“放大招”。 2025年3月27日,芯擎科技在南京举办了“擎随芯动、智融万象”生态科技日,重磅发布了“星辰一号”、“星辰一号Lite”,…...
观察者模式在Java单体服务中的运用
观察者模式主要用于当一个对象发生改变时,其关联的所有对象都会收到通知,属于事件驱动类型的设计模式,可以对事件进行监听和响应。下面简单介绍下它的使用: 1 定义事件 import org.springframework.context.ApplicationEvent;pu…...
html5时钟升级!支持切换深浅模式 Canvas实现现代化动态时钟
HTML5 Canvas实现现代化动态时钟 这里写目录标题 HTML5 Canvas实现现代化动态时钟项目介绍技术实现1. 项目架构2. Canvas绘图实现2.1 表盘绘制2.2 刻度绘制2.3 指针绘制 3. 动画效果4. 主题切换 项目亮点技术要点总结项目收获改进方向结语 项目介绍 本项目使用HTML5 Canvas技术…...
Scala(2)
For循环控制 循环守卫 基本语法 for(i <- 1 to 3 if i ! 2) { print(i " ") }println() 说明: 循环守卫,即循环保护式(也称条件判断式,守卫)。保护式为 true 则进入循环体内部,为false 则跳…...
DataGear 5.3.0 制作支持导出表格数据的数据可视化看板
DataGear 内置表格图表底层采用的是DataTable表格组件,默认并未引入导出数据的JS支持库,如果有导出表格数据需求,则可以在看板中引入导出相关JS支持库,制作具有导出CSV、Excel、PDF功能的表格数据看板。 在新发布的5.3.0版本中&a…...
项目-苍穹外卖(十六) Apache ECharts+数据统计
一、介绍 二、营业额统计 需求分析和设计: Controller: Service: /*** 营业额统计* param begindate* param enddate* return* */Overridepublic TurnoverReportVO turnoverStatistics(LocalDate begindate, LocalDate enddate) {//创建时间集合List<LocalDate&…...
使用 PowerShell 脚本 + FFmpeg 在 Windows 系统中批量计算 MP4视频 文件的总时长
步骤 1:安装 FFmpeg 访问 FFmpeg 官网(Download FFmpeg),下载 Windows 版编译包(如 ffmpeg-release-full.7z)。或者到(https://download.csdn.net/download/zjx2388/90539014)下载完整资料 解压文件&#…...
低成本文件共享解决方案:Go File本地Docker部署与外网访问全记录
文章目录 前言1. 安装Docker2. Go File使用演示3. 安装cpolar内网穿透4. 配置Go File公网地址5. 配置Go File固定公网地址 前言 在这个信息爆炸的时代,谁还没遇到过这样的囧事呢?正在办公室电脑上赶工报告,手机却突然蹦出一条紧急邮件&#…...
python文件的基本操作和文件读写
目录 文件的基本操作 文件读写 文件的基本操作 Python 中对文件的基本操作主要包括打开文件、读取文件、写入文件和关闭文件等操作。下面是一个简单的示例: 打开文件: file open(example.txt, r) # 使用 open() 函数打开一个名为 example.txt 的文…...
大数据与datax1.0
一、datax含义 是一个数据搬运工具 二、需要注意的点 插件(plugin)下面的reader和writer 要删除(第一步执行肯定会报错 所以请记得一定要删除reader和writer下的隐藏文件) 三、心得 做任何事要事半功倍,而不要事倍功半,好的学习方法永远比盲目的努力更重要--------谨记3.31…...
蚂蚁集团主导的ISO密码学国际标准立项,纳入国产算法
蚂蚁集团主导的ISO密码学国际标准 ISO 25330-3 立项, 国产算法Ferret成为标准方案。 近日,在美国弗吉尼亚州举行的 ISO/IEC JTC 1/SC 27 全体会议上,ISO/IEC 25330第三部分《Information Security — Oblivious Transfer — Part 3: Obliv…...
【新人系列】Golang 入门(十):错误处理详解 - 上
✍ 个人博客:https://blog.csdn.net/Newin2020?typeblog 📝 专栏地址:https://blog.csdn.net/newin2020/category_12898955.html 📣 专栏定位:为 0 基础刚入门 Golang 的小伙伴提供详细的讲解,也欢迎大佬们…...
Unity 2022.3.x部分Android设备播放视频黑屏问题
Android平台视频兼容性问题很多…类似的黑屏问题真的很头大,总结一些常见问题: 1. 视频文件不支持压缩 如果使用AssetBundle加载视频,这个AssetBundle压缩格式要选None。有人可能会说最新版Unity已经支持bundle压缩下播放视频,稳…...
基于Python的Django框架的个人博客管理系统
标题:基于Python的Django框架的个人博客管理系统 内容:1.摘要 本文围绕基于Python的Django框架构建个人博客管理系统展开。背景方面,随着互联网发展,个人博客成为信息分享与交流重要平台,传统博客管理系统在功能与灵活性上存在不足。目的是开…...
Unity加载OSGB倾斜摄影数据
Unity加载OSGB倾斜摄影数据 显而易见有一个最方便的办法就是使用CesiumForUnity确定是可以通过osgb数据转换成3dtiles进行加载的,然而有没有直接加载osgb格式数据的方法呢? 我们知道osgb的osg推出的倾斜摄影数据的数据结构,所以,…...
RabbitMQ简单介绍和安装
RabbitMQ简单介绍 一.RabbitMQ介绍二.RabbitMQ的作用1.异步解耦2.流量削峰3.消息分发4.延迟通知 三.RabbitMQ安装(Ubuntu)1.先安装Erlang2.安装RabbitMQ3.安装RabbitMQ的管理界面4.创建虚拟机5.端口号信息 四.工作原理图 一.RabbitMQ介绍 RabbitMQ 是一款…...
【清华大学】DeepSeek政务应用场景与解决方案
目录 一、政务数字化转型三阶段演进二、人工智能政务应用场景四大方向 三、技术方案核心技术 四、解决方案案例1. 公文写作2. 合同协议智能审查3. 行政执法4. 就业指导 五、风险及对策六、落地大四步法七、未来发展展望AI职业替代逻辑空间智能与具身智能人机共生 一、政务数字化…...
spring boot自动装配原理
springboot自动装配几乎是现在面试必问的面试题,要是逐行分析自动装配流程肯定是很复杂的,因此我们从大体上来梳理即可。 一、 自动装配总览 首先要搞清楚两个问题,springboot自动装配是什么?解决了什么问题? springbo…...
【SDMs分析1】基于ENMTools R包的生态位分化分析和图像绘制(identity.test())
基于ENMTools包的生态位分化 1. 写在前面2. 生态位分化检验案例13. 生态位分化检验案例21. 写在前面 最近学了一个新的内容,主要是关于两个物种之间生态位分化检验的 R 语言代码。生态位分化是物种分布模型(SDM )研究中的关键部分,许多 SCI 论文都会涉及这一分析。该方法主…...
蓝桥杯比赛python程序设计——纯职业小组
问题描述 在蓝桥王国,国王统治着一支由 nn 个小队组成的强大军队。每个小队都由相同职业的士兵组成。具体地,第 ii 个小队包含了 bibi 名职业为 aiai 的士兵。 近日,国王计划在王宫广场举行一场盛大的士兵检阅仪式,以庆祝王…...
【Git教程】将dev分支合并到master后,那么dev分支该如何处理
将 dev 合并到 master 后的分支状态与操作指南 1. 合并后的分支状态 dev 分支不会消失: Git 的 git merge 命令仅将 dev 的内容合并到 master,不会删除 dev 分支。合并后,dev 分支仍然存在,其历史记录和代码保持不变。 分支的 H…...
python系统之综合案例:用python打造智能诗词生成助手
不为失败找理由,只为成功找方法。所有的不甘,因为还心存梦想,所以在你放弃之前,好好拼一把,只怕心老,不怕路长。 python系列之综合案例 前言一、项目描述二、项目需求三、 项目实现1、开发准备2、代码实现 …...
HCIA-数据通信datacom认证
文章目录 一、数据通信简介1.1 标准协议1.2 数据传输过程 二、通用路由平台VRP2.1 VRP简介2.2 命令行基础 三 、网络层协议IP3.1 数据封装3.2 数据包传输2.3 IP地址2.4 子网划分2.5 ICMP 四、IP路由基础4.1 路由概述4.2 路由表4.3 路由转发4.4 静态路由4.5 动态路由4.6 路由高级…...
学以致用,基于OpenCV的公摊面积估算程序
由于很多户型图并没有标注各个房间或者走廊的面积,亦或比较模糊,且很多人并不具备迅速口算多个小数相加再做除法的能力,本帖通过程序粗略计算公摊比例。由于非专业人士,公摊面积涉及到很多建筑学的专业公式,因此本帖只…...
Odoo/OpenERP 和 psql 命令行的快速参考总结
Odoo/OpenERP 和 psql 命令行的快速参考总结 psql 命令行选项 选项意义-a从脚本中响应所有输入-A取消表数据输出的对齐模式-c <查询>仅运行一个简单的查询,然后退出-d <数据库名>指定连接的数据库名(默认为当前登录用户名)-e回显…...
Ubuntu20.04安装OpenVINO环境以及YOLOv8 C++部署测试
深度学习 文章目录 深度学习一、三种推理框架介绍1、OpenVINO介绍2、TensorRT介绍3、Mediapipe介绍 二、三种框架的对比1、框架自身比较2.1、从模型部署上:2.2.从支持深度学习模型上:2.3.从应用平台上:2.4.从上手的难易程度上: 2、应用平台比…...
uniapp微信小程序封装navbar组件
一、 最终效果 二、实现了功能 1、nav左侧返回icon支持自定义点击返回事件(默认返回上一步) 2、nav左侧支持既显示返回又显示返回首页icon 3、nav左侧只显示返回icon 4、nav左侧只显示返回首页icon 5、nav左侧自定义left插槽 6、nav中间支持title命名 7…...
Docker中安装MySQL--------【详细图解】
1.根据所需拉取镜像---------不指定版本会下载最新版 docker pull mysql:8.0.27 2.查看所拉取的镜像 docker images 3.在/usr/local下创建docker、mysql目录 cd /usr/local mkdir docker mkdir mysql 4.进入mysql文件夹 cd mysql 5.创建config文件夹 mkdir config 6.编写配…...
QT基础:安装与简介
QT初级 1、简介1.1 安装1.2 设置1.3 在VS中配置Qt1.3 帮助文档 2、Qt项目2.1 创建项目2.1 项目文件2.2 Qt中的窗口类窗口显示 2.3 坐标体系2.4 内存回收 1、简介 QT是一个跨平台的C应用程序开发框架。几乎支持所有的平台, 可用于桌面程序开发以及嵌入式开发。 Qt是标准 C 的扩…...
智能打印预约系统:微信小程序+SSM框架实战项目
微信小程序打印室预约系统,采用SSM(SpringSpringMVCMyBatis)经典框架组合。 一、系统核心功能详解 1. 智能化管理后台 用户数据看板打印店资源管理预约动态监控服务评价系统 2. 微信小程序端 智能定位服务预约时段选择文件…...