备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题:回忆画廊

news2025/3/31 13:20:01

提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议


由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题,在这里只提供部分原题代码

本题目为:备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题:回忆画廊


题目:

经过运行环境运行之后的效果如下:

本题需要做的代码如下:

const List = {
  template: `
    <div class="photo-list">
      <el-row :gutter="20">
      <!--TODO:待修改代码  每一个 el-col 存放一个单张照片  -->
        <el-col :span="6">
          <el-card>
           <!-- TODO:待修改代码 目标 1  -->
            <el-image
              style="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.photos
     
    return {
      photos
    };
  },
};

 本题目标如下:

请在 components/List.js 文件中补全代码,具体需求如下:

  1. 根据 photos 数据(非固定数据)动态渲染 el-col ,注意时间戳渲染为 2022-01-12 格式,月份和日期不足 2 位数需要补 0。

photos 为图片对象数据,其中单个对象数据字段介绍如下:

字段类型描述
idNumber照片 ID
urlString照片 URL
titleString照片标题
dateNumber照片日期,时间戳格式
  1. 当照片加载出错时,使用已定义的 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-image
                            style="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.photos

        return {
            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.photos

        return {
            photos
        };

    },
};

感谢观看此篇文章,谢谢大家的支持,本片文章只是我自己学习的历程,有些写的不好地方欢迎大家交流改动。

长路漫漫,我们还需努力!

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

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

相关文章

Windows下docker使用教程

docker安装 镜像制作镜像加载容器创建更新镜像导出镜像 Windows10安装dockerdocker image制作docker 镜像加载docker 容器创建更新imageimage 导出为.tar文件 #以Windows10 、11为例 linux和Windows区别在于docker安装的程序是哪个操作系统的&#xff0c;后面的内容其实不变 …

Java项目生成接口文档的方案

文章目录 问题&#xff1a;Java项目生成接口文档的方案方案一&#xff1a;Swagger3.0方案二&#xff1a;Apipost两者对比 问题&#xff1a;Java项目生成接口文档的方案 需求 1、需要生成生成时间&#xff0c;作者名称&#xff0c;项目名称&#xff0c;接口名称&#xff0c;请…

案例实践 | 招商局集团以长安链构建“基于DID的航运贸易数据资产目录链”

概览 案例名称 基于DID的航运贸易数据资产目录链 业主单位 招商局集团 上线时间 2024年10月 用户群体 供数用数企业和个人 用户规模 集团内20企业 案例背景 招商局集团深入落实“促进数据高效流通使用、赋能实体经济”精神&#xff0c;深化集团数字化水平&#xff0c…

2025年移动端开发性能优化实践与趋势分析

启动速度优化 本质&#xff1a;缩短首次可见帧渲染时间。 方法&#xff1a; iOS&#xff1a;利用Core ML本地模型轻量化部署&#xff0c;减少云端等待。Android&#xff1a;强制启用SplashScreen API&#xff0c;通过setKeepOnScreenCondition控制动画时长。冷启动需将耗时操…

Docker Compose介绍

基本概念 Docker-Compose是Docker官方的开源项目&#xff0c;负责实现对docker容器集群的快速编排。 可以这么理解&#xff0c;docker compose是docker提出的一个工具软件&#xff0c;可以管理多个docker容器组成一个应用&#xff0c;只需要编写一个YAML格式的配置文件docker…

头歌实践教学平台--【数据库概论】--SQL

一、表结构与完整性约束的修改(ALTER) 1.修改表名 USE TestDb1; alter table your_table rename TO my_table; 2.添加与删除字段 #语句1&#xff1a;删除表orderDetail中的列orderDate alter table orderDetail drop orderDate; #语句2&#xff1a;添加列unitPrice alter t…

算法基础——模拟

目录 1 多项式输出 2.蛇形方阵 3.字符串的展开 模拟&#xff0c;顾名思义&#xff0c;就是题⽬让你做什么你就做什么&#xff0c;考察的是将思路转化成代码的代码能⼒。这类题⼀般较为简单&#xff0c;属于竞赛⾥⾯的签到题&#xff08;但是&#xff0c;万事⽆绝对&#xff…

【第30节】MFC编程:ListCtrl控件和TreeCtrl控件

目录 引言 一、高级控件ListCtrl 二、高级控件TreeCtrl 三、Shell控件 四、CImageList 五、综合代码示例 引言 在MFC编程里&#xff0c;高级控件能大幅提升应用程序的交互性与功能性。接下来&#xff0c;咱们会详细讲讲ListCtrl和TreeCtrl这两个高级控件。不仅会介绍它们…

JavaScript 手写 call、apply、bind 和 new

1. 手写 call 方法 核心思路&#xff1a;改变函数的 this 指向并立即执行&#xff0c;通过将函数临时挂载到目标对象上调用。 Function.prototype.myCall function (context, ...args) {// 如果 context 为 null 或 undefined&#xff0c;则默认为 windowcontext context |…

计算机网络基础:量子通信技术在网络中的应用前景

计算机网络基础:量子通信技术在网络中的应用前景 一、前言二、量子通信技术基础2.1 量子通信的基本概念2.2 量子通信的主要原理2.2.1 量子密钥分发(QKD)原理2.2.2 量子隐形传态原理三、量子通信技术的特点3.1 绝对安全性3.2 超高通信速率潜力3.3 抗干扰能力强四、量子通信技…

Postman 下载文件指南:如何请求 Excel/PDF 文件?

在 Postman 中进行 Excel/PDF 文件的请求下载和导出&#xff0c;以下是简明的步骤&#xff0c;帮助你轻松完成任务。首先&#xff0c;我们将从新建接口开始&#xff0c;逐步引导你完成整个过程。 Postman 请求下载/导出 excel/pdf 文件教程

Stereolabs ZED Box Mini:机器人与自动化领域的人工智能视觉新选择

在人工智能视觉技术快速发展的今天&#xff0c;其应用场景正在持续拓宽&#xff0c;从智能安防到工业自动化&#xff0c;从机器人技术到智能交通&#xff0c;各领域都在积极探索如何利用这一先进技术。而 Stereolabs 推出的ZED Box Mini&#xff0c;正是一款专为满足这些多样化…

arm之s3c2440的I2C的用法

基础概念 IC&#xff08;Inter-Integrated Circuit&#xff09;又称I2C&#xff0c;是是IICBus简称&#xff0c;所以中文应该叫集成电路总线。 IIC的总线的使用场景&#xff0c;所有挂载在IIC总线上的设备都有两根信号线&#xff0c;一根是数据线SDA&#xff0c;另一 根是时钟…

redis部署架构

一.redis多实例 如上图所示&#xff0c;我们经常使用实例的端口号来作为实例的安装目录名称。 1.创建实例安装目录 如上图所示&#xff0c;这是创建实例的安装目录&#xff0c; 2.拷贝实例的配置文件 如上图所示&#xff0c;将redis解压目录下的配置文件拷贝到对应的conf目录…

深入理解指针(4)(C语言版)

文章目录 前言一、回调函数是什么&#xff08;一&#xff09;定义&#xff08;二&#xff09;工作原理&#xff08;三&#xff09;应用场景 二、qsort举例&#xff08;一&#xff09;qsort函数简介&#xff08;二&#xff09;比较函数的定义&#xff08;三&#xff09;使用示例…

【HTML】验证与调试工具

个人主页&#xff1a;Guiat 归属专栏&#xff1a;HTML CSS JavaScript 文章目录 1. HTML 验证工具概述1.1 验证的重要性1.2 常见 HTML 错误类型 2. W3C 验证服务2.1 W3C Markup Validation Service2.2 使用 W3C 验证器2.3 验证结果解读 3. 浏览器开发者工具3.1 Chrome DevTools…

​​SenseGlove与Aeon Robotics携手推出HEART项目,助力机器人培训迈向新台阶

在自动化和机器人技术快速发展的今天&#xff0c;SenseGlove和Aeon Robotics联合推出了一项创新项目——HEART项目。该项目在欧盟资助的MasterXR框架内展开&#xff0c;旨在通过整合虚拟现实&#xff08;VR&#xff09;、力反馈触觉手套&#xff08;SenseGlove项目Rembrandt&am…

mapbox进阶,仿照百度,加载marker点位,移入marker点切换图标,点击展示气泡,气泡和marker联动

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️marker 标注点位 api1.3.1 ☘️构造函数…

使用HTML5和CSS3实现3D旋转相册效果

使用HTML5和CSS3实现3D旋转相册效果 这里写目录标题 使用HTML5和CSS3实现3D旋转相册效果项目介绍技术栈核心功能实现思路1. HTML结构2. CSS样式解析2.1 基础样式设置2.2 3D效果核心样式2.3 卡片样式 3. JavaScript交互实现3.1 旋转控制3.2 自动播放功能 技术要点总结项目亮点总…

游戏引擎学习第186天

回顾并规划今天的任务 现在&#xff0c;我们站在了一个关键的时刻&#xff0c;准备突破&#xff0c;拥有一些优秀的性能分析代码。从目前来看&#xff0c;我们已经能够看到时间的消耗情况&#xff0c;我对这一点感到非常兴奋。昨天的直播中我们勉强让一些东西工作了&#xff0…