当前位置:首页 » 《随便一记》 » 正文

案例: 购物车渲染_aichixiangcaia的博客

3 人参与  2022年03月02日 10:18  分类 : 《随便一记》  评论

点击全文阅读


 步骤: 1. 搭一下结构,

            2. 下载axios包

             3. 映入axios包

              4. 在created() {} 发送请求获取数据

                5.  将数据利用v-for循环到页面中(在data里面声明一个空数组,来装载请求回来的数据)

                6. 调整样式

                7. 根据索引删除当前的li

<template>
  <div>
    <h2>我的购物车</h2>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <img :src="item.img" alt="">
        <p>{{item.name}}</p>
        <p>{{item.price}}</p>
        <div class="off" @click="btn(index)">×</div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  props: {},
  data () {
    return {
      list: []
    }
  },
  methods: {
    btn (index) {
      this.list.splice(index, 1)
    }
  },
  computed: {},
  watch: {},
  created () {
    axios({
      url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
    }).then(res => {
      console.log(res)
      this.list = res.data.data
    })
  },
  mounted () {},
  components: {}
}
</script>

<style scoped>
h2 {
  text-align: center;
}
li {
  position: relative;
  width: 190px;
  height: 240px;
  list-style: none;
  float: left;
  box-shadow: 3px;
}

img {
  width: 180px;
  height: 200px;
}
.off {
  position: absolute;
  right: 20px;
  top: 5px;
  width: 30px;
  height: 30px;
  background-color: #ccc;
  text-align: center;
}
.off:hover {
  background-color: orange;
}
</style>


点击全文阅读


本文链接:http://zhangshiyu.com/post/35616.html

数据  请求  数组  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 假千金空间通兽世乌行雪赫苍小说(乌行雪赫苍)前传+全书阅读新作预览
  • 重生后联姻丈夫爱上KTV小妹我死遁了(姜满裴聿琛温舒柠),重生后联姻丈夫爱上KTV小妹我死遁了
  • 睁眼大婚日,我踹了渣夫抱紧金大腿(云筝厉无恙)_睁眼大婚日,我踹了渣夫抱紧金大腿
  • 爱不复从前后续更新+番外_闻言温念初裴大校园甜文_小说后续在线阅读_无删减免费完结_
  • 海棠影下爱难寻(白若欢宋衍舟)_海棠影下爱难寻(白若欢宋衍舟)
  • 小说穿成烈士后代,下乡前搬空极品家小说已更新+番外篇章(于静静陆云霄)纯净阅读
  • 我抛弃赘婿去冲喜,黑道大佬却发疯了(许棠傅明礼)全书浏览_我抛弃赘婿去冲喜,黑道大佬却发疯了全书浏览
  • 鬓边不是牡丹红结局+后续(盛惟芳贺锦萧既明)_鬓边不是牡丹红结局+后续(盛惟芳贺锦萧既明)
  • 霍爷,夫人的离婚协议又寄来了热门榜首_南菫诺霍璟桉热门榜首_小说后续在线阅读_无删减免费完结_
  • 大婚日兄亡婚变(楚凌彻慕雪尘)全书免费_(楚凌彻慕雪尘)大婚日兄亡婚变后续(楚凌彻慕雪尘)
  • 独家江念柔裴景玹无删减(皇叔疯宠,娇娇美人逃不掉)(江念柔裴景玹)TXT免费版阅读
  • 等不到鬓雪相拥云朝朝(容临渊云朝朝沈清瑶)全书免费_(容临渊云朝朝沈清瑶)等不到鬓雪相拥云朝朝后续(容临渊云朝朝沈清瑶)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1