布局切换
介绍
经常用手机购物的同学或许见过这种功能，在浏览商品列表的时候，我们通过点击一个小小的按钮图标，就能快速将数据列表在大图（通常是两列）和列表两种布局间来回切换。
本题需要在已提供的基础项目中使用 Vue 2.x 知识，实现切换商品列表布局的功能。
准备
开始答题前，需要先打开本题的项目文件夹，目录结构如下：
1
2
3
4
5
6
7
8
| ├── effect.gif
├── goodsList.json
├── css
├── images
├── index.html
└── js
├── axios.min.js
└── vue.js
|
其中：
effect.gif 是最终实现的效果图。goodsList.json 是请求需要用到的数据。css 是样式文件夹。images 是图片文件夹。js/vue.js 是 Vue2.x 文件。js/axios.min.js 是 axios 文件。index.html 是页面布局及逻辑。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
1
2
| cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/9791/07.zip && unzip 07.zip && rm 07.zip
|
使用 live server 插件启动项目，并在浏览器中预览 index.html 页面，显示如下：
当前并未实现数据异步加载和点击右上方按钮切换布局的效果。
注意：一定要通过 live server 插件启动项目，避免项目无法访问，影响做题。
目标
请在 index.html 文件中补全代码，最终实现数据渲染及切换布局的效果。
具体需求如下：
- 完成数据请求（数据来源
goodsList.json，请勿修改该文件中提供的数据）。在项目目录下已经提供了 axios，考生可自行选择是否使用。效果如下：
- 点击“列表效果”的图标，图标背景色变为红色（即
class=active），“大图效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为列表效果。效果如下：
- 点击“大图效果”的图标，图标背景色变为红色（即
class=active），“列表效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为大图效果。效果如下：
完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。
规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 请勿修改项目中提供的
id、class、函数名等名称，以免造成无法判题通过。
- 请勿修改
goodsList.json 文件中提供的数据。
判分标准
总通过次数: 889 | 总提交次数: 939 | 通过率: 94.7%
难度: 中等 标签: 2022, 省赛, Web 前端, Vue.js
题解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>布局切换</title>
<script type="text/javascript" src="./js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<script
src="./js/axios.min.js"
type="text/javascript"
charset="utf-8"
></script>
</head>
<body>
<div id="app" v-cloak>
<div class="bar">
<a class="grid-icon" :class="activeIndex === 0 ? 'active' : ''" @click="layoutChange(0)"></a>
<a class="list-icon" :class="activeIndex === 1 ? 'active' : ''" @click="layoutChange(1)"></a>
</div>
<ul class="grid" v-if="activeIndex === 0">
<li v-for="item in goodsList" :key="item.title">
<a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
</li>
</ul>
<ul class="list" v-else>
<li v-for="item in goodsList" :key="item.title">
<a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
<p>{{ item.title }}</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
activeIndex: 0
},
mounted() {
axios.get('./goodsList.json').then(res => {
console.log(res.data);
this.goodsList = res.data
})
},
methods: {
layoutChange(index) {
this.activeIndex = index
}
}
});
</script>
|
