vue實現淘寶購物車功能的方法-創(chuàng)新互聯(lián)

這篇文章主要講解了vue實現淘寶購物車功能的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于成都網站制作、網站設計、外貿網站建設、汝陽網絡推廣、微信小程序、汝陽網絡營銷、汝陽企業(yè)策劃、汝陽品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供汝陽建站搭建服務，24小時服務熱線：13518219792，官方網址：muchs.cn

淘寶購物車功能，效果如下圖

vue實現淘寶購物車功能的方法

非常簡單的邏輯，沒有做代碼的封裝，代碼如下

<div class="list-container">
    <div class="top-ops">
        <div>
          <img src="../../../static/images/HomeRecommendShopInfoAdress@2x.png" alt="">
          <span>浙江省杭州市...</span>
        </div>
        <div class="ops">
          <span v-if="cartStatus === 'account'" @click="cartStatus = 'edit'">編輯商品</span>
          <span v-if="cartStatus === 'edit'" @click="cartStatus = 'account'">完成</span>
        </div>
    </div>
    <div class="paddingB200">
      <div class="shop-list" v-for="(item,index) in cartShops" :key="index">
        <div class="shop-name">
          <label>
            <input type="checkbox"
              name="shopRadio"
              :value="item.productShopId"
              @click="shopCheck($event,cartShops)"
            class="disN">
            <b></b>
          </label>
          <div>
            <div>
              <img src="../../../static/images/mall@2x.png" alt="">
              <span class="name">{{item.shopName}}</span>
            </div>
            <span>
              <img src="../../../static/images/jtxq@2x.png" alt="">
            </span>
          </div>
        </div>
        <div class="goods-list" v-for="(goods,goodsIndex) in item.detailLists" :key="goodsIndex">
          <label>
            <input type="checkbox"
              name="goodRadio"
              :price="goods.price"
              :num="goods.number" :dataId="item.productShopId"
              :value="goods.cartDetailId"
              @click="goodsCkeck($event,item.detailLists,cartShops,item.productShopId)"
            class="disN">
            <b></b>
          </label>
          <div class="middle">
            <img :src="goods.reportImage" alt="">
            <div>
              <p class="name">{{goods.name}}</p>
              <p class="spec">{{goods.specifications}}</p>
              <p class="tab">
                <img src="../../../static/images/lsspbq@2x.png" alt="">
              </p>
            </div>
          </div>
          <div class="right">
            <p class="price">￥{{goods.price}}</p>
            <p class="num">X{{goods.number}}</p>
            <p class="caculate">
              <span class="mark" @click="numDecrease(goods.number)"></span>
              <span class="beeforCacul">{{goods.number}}</span>
              <span class="cacul" :num="goods.cartDetailId">{{goods.number}}</span>
              <span class="mark" @click="numAdd(goods.number)"></span>
            </p>
          </div>
        </div>
      </div>
      <div class="edit" v-if="cartStatus === 'edit'">
        <label>
          <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)">
          <b></b>
          <span>全選</span>
        </label>
        <span class="delet">刪除(3)</span>
      </div>
      <div class="gotopay" v-if="cartStatus === 'account'">
        <label>
          <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)">
          <b></b>
          <span class="marginR40">全選</span>
          <span>合計：</span>
          <span class="sum">￥{{sumPrice.toFixed(2)}}</span>
        </label>
        <span class="delet" @click="cauSum">去結算({{totalNumber}})</span>
      </div>
    </div>
</div>

網站題目：vue實現淘寶購物車功能的方法-創(chuàng)新互聯(lián)
新聞來源：http://muchs.cn/article28/degscp.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、標簽優(yōu)化、App開發(fā)、企業(yè)建站、品牌網站建設、網站營銷

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網站制作