<template>
  <div class="box">
    <h3>我的购物车</h3>
    <p>获取图书信息</p>
    <!-- <button>点击获取信息</button> -->
    <ul v-for="(item, index) in list" :key="index">
      <li>
        <img :src="item.img" alt="" class="img" />
        <p>{{ item.name }}</p>
        <p>{{ item.price }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      //专门来接受数据
      list: [],
    };
  },
  methods: {
    async getList() {
      const res = await axios({
        url: "https:www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books",
        method: "GET",
      });
      this.list = res.data.data;
      console.log(res);
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  /* border: 2px solid blue; */
  margin: auto;
}
ul > li {
  list-style: none;
  float: left;
}
.img {
  width: 200px;
  height: 200px;
}
h3 {
  text-align: center;
}
</style>