JZTXT

布局切换

发布时间 2023-06-05 15:57:33作者: GTK

习题链接

布局切换

任务

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

分类 ：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>