购物车渲染

1.需求：渲染展示图书

2.呈现效果：

 3.完成代码：

<template>
  <div id="app">
    <h3>我的购物车</h3>
    <div>
      <ul
        v-for="(item, index) in getBooks"
        :key="index"
        :class="{ current: index === highlight }"
        @click="curFn(index)"
      >
        <li>
          <img :src="item.img" />
        </li>
        <li id="nameLi">
          <p id="namep">{{ item.name }}</p>
          <span>{{ item.price }}</span>
        </li>
        <button id="but" title="移出购物车" @click="butFn(index)">X</button>
      </ul>
    </div>
  </div>
</template>

<script>
// 需求：渲染展示图书
// axios在main.js全局配置
export default {
  data() {
    return {
      // 定义变量 接收拿过来的数据
      getBooks: [],
      // 默认有边框的索引
      highlight: 0,
    };
  },
  // 把axios封装 方便后期复用
  methods: {
    async booKs() {
      try {
        const res = await this.$axios.get("/api/books");
        console.log(res);
        this.getBooks = res.data.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 删除
    butFn(idx) {
      this.getBooks.splice(idx, 1);
    },
    // 边框
    curFn(i) {
      this.highlight = i;
    },
  },
  // 调用axios 在初始化钩子之后拿数据
  created() {
    this.booKs();
  },
};
</script>