蓝桥杯2022web省赛赛题题解-07

最新推荐文章于 2024-10-02 00:00:31 发布

Veilhry

最新推荐文章于 2024-10-02 00:00:31 发布

阅读量542

点赞数 1

分类专栏：蓝桥杯web 文章标签： web 蓝桥杯

本文链接：https://blog.csdn.net/weixin_46439063/article/details/124168270

版权

蓝桥杯web 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

蓝桥杯2022web省赛赛题题解-07

完整代码见GitHub：github.com/Veilhry/lanqiaoweb/tree/master/07

网页在线预览地址：https://veilhry.github.io/lanqiaoweb/07/index.html

布局切换

介绍
经常用手机购物的同学或许见过这种功能，在浏览商品列表的时候，我们通过点击一个小小的按钮图标，就能快速将数据列表在大图（通常是两列)和列表两种布局间来回切换。
本题需要在已提供的基础项目中使用Vue 2.x 知识，实现切换商品列表布局的功能。

初始效果

当前并未实现数据的异步加载以及点击右上方按钮切换布局的效果。
在这里插入图片描述

目标

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

完成数据请求（数据来源goodsList.json，请勿修改该文件中提供的数
据)。在项目目录下已经提供了axios，考生可自行选择是否使用。
点击“列表效果”的图标，图标背景色变为红色(即class=active) ,
“大图效果”的图标背景色变为灰色(即class=active被移除)，布局切换为列表效果。效果如下:

最终实现效果如图：
在这里插入图片描述

题解

本题主要是考察vue模板语法的基本应用，首先需要通过axios异步获取页面渲染数据，当然也可以使用原生ajax以及fetch等方式请求数据。数据请求完成后，通过点击事件切换按钮的class，然后再对需要渲染的页面结构进行控制。涉及的语法有v-if、生命周期函数，v-on/@事件绑定、v-bind/:prop属性绑定。需要注意的是两个不同布局的页面内容有所不同，动态渲染时注意元素的绑定正确。

<!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="large?'grid-icon active':'grid-icon'" @click="handlelarge"></a>
        <a :class="small?'list-icon active':'list-icon'" @click="handlesmall" ></a>
      </div>
      <!--grid 示例代码，动态渲染时可删除-->
      <ul class="grid" v-if="large">
        <li v-for="item in goodsList">
          <a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
        </li>
      </ul>
      <ul class="list" v-if="small">
        <li v-for="item in goodsList">
          <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: [],
      large:true,
      small:false
    },
    methods:{
      handlelarge(){
        this.large =true
        this.small = false
      },
      handlesmall(){
        this.large = false
        this.small = true
      }
    },
    mounted() {
      // TODO：补全代码实现需求
      axios.get('goodsList.json')
      .then(res=>{
        this.goodsList=res.data
      })
    },
  });
</script>