备赛蓝桥杯之第十六届模拟赛第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-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文件中补全代码，具体需求如下：
- 根据
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-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
};
},
};感谢观看此篇文章，谢谢大家的支持，本片文章只是我自己学习的历程，有些写的不好地方欢迎大家交流改动。
长路漫漫，我们还需努力！