Vue 简单购物车实现

vue——购物车代码

<template>
  <div>
    <!-- 头部导航 -->
    <van-sticky>
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        left-arrow
        @click-left="back"
      >`在这里插入代码片`
        <template #right>
          <van-icon
            name="shopping-cart-o"
            size="20"
            color="black"
            :badge="carts.length"
            @click="goCart"
          />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!--展示的商品 -->
    <!-- ---------------------------------------------------------------------- -->
    <ul>
      <li>
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(img, index) in goods.imgs" :key="index">
            <img :src="img" alt="" width="100%" />
          </van-swipe-item>
        </van-swipe>
        <p class="op">￥{
   {
    goods.originalPrice }}</p>
        <span> {
   {
    goods.title }} </span>
        <!-- ---------------------------------------------- -->
        <img
          v-for="(url, index) in goods.detailPics"
          :key="index"
          :src="url.img"
          style="width:100%;"
        />
      </li>
    </ul>
    <!-- --------