【蓝桥杯web】2022年第十三届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 是页面布局及逻辑。

当前出现的问题是：

1. 当前并未实现数据异步加载。
2. 点击右上方按钮并未切换布局的效果

目标：

请在 index.html 文件中补全代码，最终实现数据渲染及切换布局的效果。

1. 完成数据请求（数据来源 goodsList.json，请勿修改该文件中提供的数据）。
2. 点击“列表效果”的图标，图标背景色变为红色（即 class=active），“大图效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为列表效果。
3. 点击“大图效果”的图标，图标背景色变为红色（即 class=active），“列表效果”的图标背景色变为灰色（即 class=active 被移除），布局切换为大图效果。

解题思路：

为两个<a>标签分别设置点击函数，并绑定动态class属性。其中，分别当isGActive / isLActive为true时，<a>标签高亮。

分别为grid与list添加v-for循环，用axios获取到的值赋予到标签内动态的title、href和img的src，进而实现动态渲染。

html代码如下：

<!-- TODO：请在下面实现需求 -->
      <div class="bar">
        <a class="grid-icon" :class="{ 'active': isGActive }" @click="grid"></a>
        <a class="list-icon" :class="{ 'active': isLActive }"  @click="list"></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-for="items in goodsList" v-show="flag">
        <li>
          <a :href="items.url" target="_blank"> <img :src="items.image.large" /></a>
        </li>
      </ul>
      <ul class="list" v-for="items in goodsList" v-show="!flag">
        <li>
          <a :href="items.url" target="_blank"> <img :src="items.image.small" /></a>
          <p>{{items.title}}</p>
        </li>
      </ul>

JScript代码如下：

<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      goodsList: [],
      flag:true,
      isGActive:true,
      isLActive:false,
    },
    mounted() {
      // TODO：补全代码实现需求
      axios.get('goodsList.json').then((res)=>{
        this.goodsList=res.data
      })
    },
    methods:{
      grid(){
        this.flag=true
        this.isLActive=false;
        this.isGActive=true;
      },
      list(){
        this.flag=false
        this.isLActive=true;
        this.isGActive=false;
      }
    }
  });
</script>

大功告成！！

如有不合理的地方，欢迎各位大牛提出指正！

笔芯ღ( ´･ᴗ･` )