长春火车站疫情最新消息昆明百度推广优化
提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议
由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题，在这里只提供部分原题代码
本题目为：备赛蓝桥杯之第十六届模拟赛第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};},
};感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！