Vue實(shí)現(xiàn)購(gòu)物車的全選、單選、顯示商品價(jià)格代碼實(shí)例

更新時(shí)間：2019年05月06日 14:23:16 作者：哲與HD

這篇文章主要介紹了Vue實(shí)現(xiàn)購(gòu)物車的全選、單選、顯示商品價(jià)格實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

購(gòu)物車的基本頁(yè)面如下：

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

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

這是我個(gè)人的思路，具體代碼實(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>單價(jià)</th>
              <th>總金額</th>
              <th>加入時(shí)間</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)" style="cursor: pointer;"><img v-bind:src="web_server_static+dateil.product.productPhoto"></a></td>
              <td><a @click="goShop(dateil.detailProductId)" style="cursor: pointer;">{{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 style="font-size: 25px;text-align: center; margin-top: 300px;height: 100px;">購(gòu)物車空空如也，請(qǐng)先去購(gòu)買商品~</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>

Vue中的數(shù)據(jù)應(yīng)該這樣寫

var vue = new Vue({
        el: '#a',
        data: {
          list: [],
          checkall: false,
           checked: [],
           price:0,
           count:0,
        }

js:

checkAll: function() {
            /**
            *控制全選反選
            */
            var _this = this
            //true的時(shí)候是全選，false是不選
            if(this.checkall) {
              // 實(shí)現(xiàn)反選，按鈕選中時(shí) 實(shí)現(xiàn)了反選，列表為空
              this.checked = []
              this.price=0;
              this.count=0;
            } else {
              // 實(shí)現(xiàn)全選
                this.price=0;
              this.count=0;
              this.checked = []
              this.list.forEach(function(dateil) {
                _this.price+=parseInt(dateil.detailProductprice);
                _this.count+=parseInt(dateil.detailProductnum);
                _this.checked.push(dateil.detailId)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }

        /**
           * 當(dāng)單選框選中時(shí)
           */
          checkAll: function() {

            var _this = this
            //true的時(shí)候是全選，false是不選
            if(this.checkall) {
              // 實(shí)現(xiàn)反選，按鈕選中時(shí) 實(shí)現(xiàn)了反選，列表為空
              this.checked = []
              this.price=0;
              this.count=0;
            } else {
              // 實(shí)現(xiàn)全選
                this.price=0;
              this.count=0;
              this.checked = []
              this.list.forEach(function(dateil) {
                _this.price+=parseInt(dateil.detailProductprice);
                _this.count+=parseInt(dateil.detailProductnum);
                _this.checked.push(dateil.detailId)
              })
            }
            if(this.checked.length === this.list.length) {
              this.checkall = true
              // console.log(this.checkall)
              // console.log(this.checked)
            }
          }

這樣一個(gè)購(gòu)物車的全選、單選、與數(shù)據(jù)的顯示就完成了。

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)購(gòu)物車的全選、單選、顯示商品價(jià)格詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: