商品详情基础代码

前端Vue页面分析

<template>
  <div id="myList" class="myList">
    <ul>
      <!-- 第一个列表项  遍历 -->
      <li v-for="item in list.slice(0,7)" :key="item.id">

        <!-- 删除的按钮 -->
        <el-popover placement="top">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 10px 0 0">
            <el-button type="primary" size="mini" @click="deleteCollect(item.id)">确定</el-button>
          </div>
          <i class="el-icon-close delete" slot="reference" v-show="isDelete"></i>
        </el-popover>
        
        <router-link :to="{ path: '/goods/details', query: {productID:item.id} }">
          <img :src="item.img" alt />
          <