[ 蓝桥杯Web真题 ]-布局切换

介绍

准备

目标

规定

思路

解法参考

介绍

经常用手机购物的同学或许见过这种功能，在浏览商品列表的时候，我们通过点击一个小小的按钮图标，就能快速将数据列表在大图（通常是两列）和列表两种布局间来回切换。

本题需要在已提供的基础项目中使用 Vue 2.x 知识，实现切换商品列表布局的功能。

准备

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

├── 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 是页面布局及逻辑。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

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 文件中补全代码，最终实现数据渲染及切换布局的效果。

具体需求如下：

1.完成数据请求（数据来源 goodsList.json，请勿修改该文件中提供的数据）。在项目目录下已经提供了 axios，考生可自行选择是否使用。效果如下

数据渲染后的初始效果

2.点击“列表效果”的图标，图标背景色变为红色（即 class=active），“大图效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为列表效果。效果如下

数据渲染后的初始效果

3.点击“大图效果”的图标，图标背景色变为红色（即 class=active），“列表效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为大图效果。效果如下

大图效果

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。
请勿修改 goodsList.json 文件中提供的数据。
先自己动手做一下吧：传送门

思路

这道题目主要是考察axios的数据获取，Vue的遍历等相关知识。axios的数据获取我们在很多的题目已经有见到过了，vue的遍历使用的是v-for指令。点击大图和小图图标显示对应的内容我们可以使用v-if以及v-else来进行相应部分数据的展示，若符合v-if的条件，则显示大图部分的内容，v-else则显示小图的内容。

解法参考

javascript">  mounted() {
      // TODO：补全代码实现需求
      axios.get("./goodsList.json").then((res)=>{
        this.goodsList=res.data;
      })
    }

我们使用axios来进行发送请求，传入路径以及将获取到的数据赋值给goodsList数组。

 <div class="bar">
        <a class="grid-icon" :class="{'active':index===0}" @click="index=0"></a>
        <a class="list-icon" :class="{'active':index===1}" @click="index=1"></a>
      </div>

点击大小图标实现为其添加类class=active，让其背景变成红色。我们先在data中定义一个index=0，然后我们为两个图标分别绑定事件，点击第一个图标时将index赋值为0，点击第二个图标时将index赋值为1。同时给两个图标都绑定active的类名，当index等于0时，第一个图标就添加了active类，当index等于1时，第二个图标就添加了active类。

javascript">   <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-if="index==0" >
        <li v-for="(item,index) in goodsList" :key="index">
          <a href="#/3814" target="_blank"> <img :src="item.image.large" /></a>
        </li>
      </ul>
      <ul class="list"  v-else>
        <li v-for="(item,index) in goodsList" :key="index">
          <a href="#/3814" target="_blank">  <img :src="item.image.small" /></a>
          <p>{{item.title}}</p>
        </li>
      </ul>

最后我们使用v-for对获取到的数据进行遍历，两个的主要区别就是图片的不同，因此对图片的路径进行绑定，然后当index==0时，说明是点击了第一个图标，因此相应的部分显示，否则使用v-else来显示另一个图标的内容。

好啦！本文就到这里结束啦！