备赛蓝桥杯之第十六届模拟赛第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 文件中补全代码，具体需求如下：

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

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

字段	类型	描述
id	Number	照片 ID
url	String	照片 URL
title	String	照片标题
date	Number	照片日期，时间戳格式

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-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};},
};

---

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

长路漫漫，我们还需努力！