【蓝桥杯Web】2022年十三届省赛大学组真题布局切换介绍经常用手机购物的同学或许见过这种功能，在浏览商品列表的时候，我们通过点击一个小小的按钮图标，就能快速将数据列表在大图（通常是两列）和列表-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51980838/article/details/147140801

介绍

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

本题需要在已提供的基础项目中使用 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 文件中补全代码，最终实现数据渲染及切换布局的效果。

具体需求如下：

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

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

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

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

effect.gif图如下所示。

规定

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

判分标准

本题完全实现题目目标得满分，否则得 0 分。

答案&解析：

<!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>
      <!-- TODO：请在下面实现需求 -->
      <div class="bar">
        <a class="grid-icon" :class="{active:current===0}" @click="current=0"></a>
        <!-- :class="{active:current===0}"
        :class 是 Vue 的动态类绑定语法，用于根据条件添加/移除类名。
        {active: current === 0} 是一个对象，表示：
        当 current === 0 为 true 时，添加 active 类名；
        否则移除 active 类名。 -->

        <!-- @click="current=0"
        @click 是 Vue 的点击事件语法（等同于 v-on:click）。
        current=0 是点击时执行的表达式，将 current 的值设为 0。-->
        <a class="list-icon" :class="{active:current===1}" @click="current=1"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-if="current===0">
        <li v-for="item in goodsList" :key="item.title">  
          <!--:key 是 Vue 要求的唯一标识，帮助 Vue 高效更新 DOM。-->
          <a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
          <!--:href 是 Vue 的动态属性绑定语法（等同于 v-bind:href）。-->
        </li>
      </ul>
      <ul class="list" v-else="current===1">
        <li v-for="item in goodsList" :key="item.title">
          <a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
  </body>
</html>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      current:0
    },
    mounted() {
      // TODO：补全代码实现需求
      axios.get("./goodsList.json").then(  //.then() 是 Promise 的成功回调，当请求成功时执行。
      response=>{
          this.goodsList=response.data
        }
      )
    },
  });
</script>