Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價格代碼實(shí)例-創(chuàng)新互聯(lián)

今天中午廢了一會時間，總算把項(xiàng)目中的購物車的單選、全選、以及實(shí)現(xiàn)數(shù)據(jù)的動態(tài)顯示做出來了，給小白分享一下我個人一個解決辦法：

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

購物車的基本頁面如下：

先說實(shí)現(xiàn)的總體思路

1. 1.給table表中表頭th加一個 checkbox，設(shè)這兩個事件：@click=”checkAll” v-model=”checkall”；
2. 2.給對應(yīng)的tr加一個 checkbox 綁定一個事件 v-model=”checked”，checked設(shè)為數(shù)組，專門放商品Id；
3. 3.由于checkall默認(rèn)為false,當(dāng)我勾選全選框時，將checkall設(shè)為true，往checked數(shù)組中遍歷添加所有商品ID，每列中的checkbox自動選中,此時已經(jīng)實(shí)現(xiàn)全選的取消\選中了，當(dāng)單選時，應(yīng)該將checkAll的狀態(tài)設(shè)為false，這樣就能實(shí)現(xiàn)單選多選了；
4. 4.最后一步就是對數(shù)據(jù)的動態(tài)顯示了，data中綁定兩個值，分別是price和count，當(dāng)我勾選某一列時，通過@click=”xx(price,count,productId)”傳值放到頁面上；
5. 5.單選的選中與取消可以通過判斷商品id是否存在在數(shù)組中，即indexOf(productId)==-1，如果數(shù)組中是存在此商品ID，則點(diǎn)擊單選框時應(yīng)減少價格，反之增加。

這是我個人的思路，具體代碼實(shí)現(xiàn)如下：

html：

<div id="a" class="container">
        <table class="table table-hover" v-if="list.length">
          <thead>
            <tr>
              <th><input type="checkbox" id="box" @click="checkAll" v-model="checkall" /></th>
              <th>圖片</th>
              <th>商品名</th>
              <th>數(shù)量</th>
              <th>單價</th>
              <th>總金額</th>
              <th>加入時間</th>
              <th>刪除</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(dateil,index) in list" :key="index">
              <td><input type="checkbox" class="checkbox" v-model="checked"  @click="select(dateil.detailId,dateil.detailProductprice,dateil.detailProductnum)" :value="dateil.detailId" /></td>
              <td><a @click="goShop(dateil.detailProductId)" ><img v-bind:src="web_server_static+dateil.product.productPhoto"></a></td>
              <td><a @click="goShop(dateil.detailProductId)" >{{dateil.product.productName}}</a></td>
              <td>{{dateil.detailProductnum}}</td>
              <td>{{dateil.detailProductprice}}</td>
              <td>{{dateil.detailProductprice*dateil.detailProductnum}}</td>
              <td>{{dateil.detailDatetime}}</td>
              <td>
                <button type="button" id="but" @click="del(dateil.detailId)" class="btn btn-danger">刪除</button>
              </td>
            </tr>

          </tbody>

        </table>
        <div v-else >購物車空空如也，請先去購買商品~</div>
        <div id="label_btn">
          <span><label>已選商品<a>{{count}}</a>件，共</a>￥{{price}}</a>元 數(shù)組{{checked}}</label>

          </span>
          <span><button type="button" id="btn-close" @click="jiesuan()" class="btn btn-danger">結(jié)算</button></span>
        </div>
        <!--結(jié)算按鈕-->

      </div>

本文標(biāo)題：Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價格代碼實(shí)例-創(chuàng)新互聯(lián)
本文路徑：http://muchs.cn/article28/deiccp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站策劃、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、用戶體驗(yàn)

廣告

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