真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

小編給大家分享一下vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)蓮都免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了近千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

購物車頁面的設(shè)計圖

vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

商品的列表

vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

代碼:


  • {{item.goods_name}}

    {{item.now_price | formatMoney}} {{item.goods_qty}} +

    全選的復選框

    vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

    全選的代碼:

    
         全選
         管理
         完成
         刪除
         
          合計
          {{ totalPrice }}
          結(jié)算
         
        

    單選的change事件

    vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

    代碼:

    // 單選的change事件
      chooseChange(id) {
       if (this.selectedData.indexOf(id) > -1) {
        this.remove(this.selectedData, id);
       } else {
        this.selectedData.push(id);
       }
       if (this.selectedData.length < this.shoppingListData.total) {
        this.AllChecked = false;
       } else {
        this.AllChecked = true;
       }
       console.log(this.selectedData);
      }

    全選的JS

    vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

    全選的代碼:

    // 全選和反選
      checkAll() {
       let list = this.shoppingListData.rows;
       if (this.AllChecked) {
        list.forEach(element => {
         element.isChecked = false;
        });
        this.selectedData = [];
       } else {
        list.forEach(element => {
         element.isChecked = true;
         if (this.selectedData.indexOf(element.goods_id) < 0) {
          this.selectedData.push(element.goods_id);
         }
        });
        console.log(this.selectedData);
       }
      },

    數(shù)組刪除

    vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能

    代碼

    //數(shù)組刪除
      remove(arr, val) {
       var index = arr.indexOf(val);
       if (index > -1) {
        arr.splice(index, 1);
       }
      }

    以上是“vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


    分享標題:vue+vant-UI框架如何實現(xiàn)購物車復選框全選和反選的功能
    本文URL:http://weahome.cn/article/ihiepg.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部