布局切换

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-04

14.布局切换2023-06-05

15.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

布局切换

任务

我们现在有一个购物车列表，要实现这么个功能
在浏览商品列表的时候，我们通过点击一个小小的按钮图标，就能快速将数据列表在大图（通常是两列）和列表两种布局间来回切换。

分类 ：Vue

关键点

1. 使用axios请求数据保存到data中
   1. axios中最常用的就是get与psot，axios是基于promise的异步操作，所以是可以是使用then,catch方法来处理结果的，在本题里面就是一个简单的请求
   2. axios.get(地址)
      .then(res=>{当请求成功，返回的结果在此处操作})
      .catch(err=>{执行失败的操作})
      .finally(()=>{成功或失败都将执行的操作})
2. v-指令的使用
   1. @click点击事件，进行切换布局的函数 控制是否渲染
   2. v-bind绑定属性，修改class 用法 => :class="{'grid-icon':true, active:isActive}"
   3. 使用v-if或v-show进行显示隐藏，这两则的区别是v-if渲染或不渲染节点，v-show是控制的display的值进行显示隐藏

代码实现 && 完整的代码

1. data中的数据

   data: {
     goodsList: [],
     isActive:true 
   },
   

2. 完成数据请求

    mounted() { 
      axios.get('goodsList.json').then(res=>{
        console.log(res.data);
        this.goodsList = res.data;
      })
    },
   

3. 点击事件
   html部分

   <div class="bar">
     <a @click="changeStyle(true)" :class="{'grid-icon':true, active:isActive}"></a>
     <a @click="changeStyle(false)" :class="{'list-icon':true, active:!isActive}"></a>
   </div>
   

   js部分

   changeStyle(data){ 
       this.isActive = data;
   }
   

4. 渲染列表

   <ul class="grid" v-if="isActive">
     <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="!isActive">
     <li v-for="item in goodsList">
       <a :href="item.url" target="_blank"> <img :src="item.image.small" /></a>
       <p>{{item.title}}</p>
     </li>
   </ul>
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17457971.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！