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