关于vue的购物车checkbox全选和反选等功能实例分析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了关于vue的购物车checkbox全选和反选等功能实例分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4479字，纯文字阅读大概需要7分钟。
内容图文
本文主要为大家分享一篇关于vue的购物车checkbox全选和反选等功能实例分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。由于逻辑相对简单，直接附上代码咯！愿君多采撷~~~~
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;
}相关推荐：
三种方式实现checkbox全选，反选
以上就是关于vue的购物车checkbox全选和反选等功能实例分析的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的关于vue的购物车checkbox全选和反选等功能实例分析全部内容，希望文章能够帮你解决关于vue的购物车checkbox全选和反选等功能实例分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】