vue+vant

购物车页面的设计图

商品的列表

代码：

 1 <ul v-if="shoppinglistdata.rows.length"> 2 <li 3 v-for="(item,index) in shoppinglistdata.rows"天使儿 4 :key="index" 5 > 6 <van-checkbox 7 :value="item.goods_id" 8 v-model="item.ischecked" 9 checked-color="#07c160"10 @click="choochange(item.goods_id)"11 ></van-checkbox>12 <div class="list_details">13 <div class="shop_img"><img14 :src="item.goods_image+'?w=150&h=150&crop=1'"15 alt=""16 ></div>17 <div class="goods_prentation"金化铯>18 <div class="ptitle"><p class="p1">{{item.goods_name}}</p></div>19 <!-- <p class="p2">{{item.color}}</p> -->20 <div class="price">21 <span class="spansprice"关于读书的手抄报>{{item.now_price | formatmoney}}</span>22 <span class="span_step">23 <button24 @click="handlereduce(index)"25 :disabled="item.goods_qty===1"26 >-</button>27 <i>{{item.goods_qty}}</i>28 <button @click="handleadd(index)">+</button>29 </span>30 </div>31 </div>32 </div>33 </li>34 </ul>

全选的复选框

全选的代码：

 1         <div class="footerflex"> 2           <van-checkbox 3             v-model="allchecked" 4             @click="checkall" 5           >全选</van-checkbox> 6           <span  7           class="management"  8           v-if="managementshow" 9           @click="management()"10           >管理</span>11           <span 12           class="finish"13           v-if="finishshow"14           @click="management()"15           >完成</span>16           <van-button type="default" class='delete' @click="suredel()" v-if="finishshow">删除</van-button>17           <div v-if="managementshow">18             <span class="summation">合计</span>19             <i>{{ totalprice }}</i>20             <van-button type="default" class="pay" @click="cloanaccount()">结算</van-button>21           </div>22         </div>

单选的change事件

代码：

 1     // 单选的change事件 2     choochange(id) { 3       if (this.lecteddata.indexof(id) > -1) { 4         this.remove(this.lecteddata, id); 5       } el { 6         this.lecteddata.push(id); 7       } 8       if (this.lecteddata.length < this.shoppinglistdata.total) { 9         this.allchecked = fal;10       } el {11         this.allchecked = true;12       }13       console.log(this.lecteddata);14     }

全选的js

全选的代码：

 1     // 全选和反选 2     checkall() { 3       let list = this.shoppinglistdata.rows; 4       if (this.allchecked) { 5         list.foreach(element => { 6           element.ischecked = fal; 7         }); 8         this.lecteddata = []; 9       } el {10         list.foreach(element => {11           element.ischecked = true;12           if (this.lecteddata.indexof(element.goods_id) < 0) {13             this.lected小标题作文data.push(element.goods_id);14           }15         });16         console.log(this.lecteddata);17       }18     },

数组删除

代码

1     //数组删除2     remove(arr, val) {3 apec成员国名单      var index = arr.indexof(val);4       if (index > -1) {5         arr.splice(index, 1);6       }7     }

综上所述就能实现全选和反选的功能