由于逻辑相对简单，直接附上代码咯！愿君多采撷~~~~
html代码:
<p class="select-buyer"> <checklist :options="fullvalues"></checklist> <span>id: {{selecteddata}}</span> <p class="weui-cells weui-cells_checkbox"> <label v-for='(item, index) in checkboxdata' :key="item.id" class="weui-cell weui-check_label"> <p class="weui-cell__hd"> <input :value="item.id" v-model="checkbox.items[index]" @click="handleinputchange" type="checkbox" name="vux-checkbox" class="weui-check"> <i class="weui-icon-checked vux-checklist-icon-checked"></i> </p> <p class="weui-cell__bd"> <p>{{item.value}}价格：{{item.price}}</p> </p> </label> </p> </p>
.vue文件代码:
<template src="./index.html"></template> <script> import { checklist } from "vux"; export default { name: "selectbuyer", data() { return { fullvalues: [], checkboxdata: [ { id: "1", value: "苹果4s", price: 110 }, { id: "2", value: "苹果5c", price: 250 }, { id: "3", value: "苹果6p", price: 340 } ], selecteddata: [], totalprice: 0.00, isallchecked: true, checkbox: { checked: false, items: {} } }; }, mounted() { this.checkboxdata.foreach((item, index) => { this.selecteddata.push(item.id); this.$set(this.checkbox.items, index, !this.checkbox.checked); }); }, computed: { totalpurchasers() { return this.selecteddata.length; }, calculatedtotal() { this.totalprice = 0.00; this.selecteddata.map((item1, index) => { let curitem1 = item1; this.checkboxdata.map((item2, index) => { if(this.checkboxdata[index].id == curitem1){ this.totalprice += this.checkboxdata[index].price; } }); }); return this.totalprice; } }, methods: { //全选点击事件 checkedall() { let truenum = 0; let checkboxnum = 0; object.keys(this.checkbox.items).foreach(key => { checkboxnum++; if (this.checkbox.items[key] === true) { truenum++; } }); if (truenum != 0) { if ( truenum != this.checkboxdata.length || checkboxnum < this.checkboxdata.length ) { this.checkboxdatamap(!this.checkbox.checked); } else { this.checkboxdatamap(this.checkbox.checked); } } else { this.checkboxdatamap(!this.checkbox.checked); } }, //遍历改变checkbox状态 checkboxdatamap(checked) { let checkboxdataid = []; this.checkboxdata.foreach((item, index) => { this.checkbox.items[index] = checked; checkboxdataid.push(item.id); }); if (checked == true) { this.selecteddata = this.arraymerging( this.selecteddata, checkboxdataid ); } else { this.selecteddata.splice(0, this.selecteddata.length); } }, //input输入框change事件 handleinputchange(e) { settimeout(() => { if (this.selecteddata.indexof(e.target.value) > -1) { this.remove(this.selecteddata, e.target.value); } else { this.selecteddata.push(e.target.value); } if (this.selecteddata.length < this.checkboxdata.length) { this.isallchecked = false; } else { this.isallchecked = true; } }, 0); }, //数组删除 remove(arr, val) { var index = arr.indexof(val); if (index > -1) { arr.splice(index, 1); } }, //数组合并去重 arraymerging(arr1, arr2) { var arr = arr1.concat(); for (var i = 0; i < arr2.length; i++) { if (arr.indexof(arr2[i]) === -1) { arr.push(arr2[i]); } } return arr; } }, components: { checklist }, metainfo() { return { title: "选择购卡学生" }; } }; </script> <style src="./index.less" lang="less"></style>
less样式文件：
@import (reference) "../../style/common.less"; .select-buyer { .weui-cells_checkbox { margin-top: -25px !important; font-size: 28px; .weui-cell { padding: 40px 30px !important; .vux-label-desc { font-size: inherit; } } & .weui-icon-checked:before { font-size: 48px; } & .weui-check:checked+.vux-checklist-icon-checked:before { color: @g-main-green; } } .footer .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before { content: '\ea01'; } .footer .weui-cells_checkbox .weui-check:checked+.vux-checklist-icon-checked:before { color: #c9c9c9; } } .pay-area { position: fixed; height: 94px; background-color: @g-white; display: flex; width: 100%; left: 0; bottom: 0; .pay-btn { width: 220px; text-align: center; font-size: 36px; /* px */ line-height: 94px; color: @g-white; background-color: @g-main-green; .loading-img { width: 40px; vertical-align: -3px; margin: 0 3px; } } .pay-text { font-size: 28px; color: @g-font-default-color; line-height: 54px; /* px */ display: inline-block; vertical-align: top; margin-right: 10px; } .pay-money { font-size: 48px; /* px */ line-height: 54px; /* px */ color: @g-font-dark-color; } .price-area { flex: 1; padding: 20px 30px; } } .error { padding-left: 15px; line-height: 28px; color: #888; font-size: 12px; }
相关推荐：
vue.js实现checkbox的全选和反选
三种方式实现checkbox全选，反选
js中checkbox中的全选和反选效果实现
以上就是关于vue的购物车checkbox全选和反选等功能实例分析的详细内容。