关于vue的购物车checkbox全选和反选等功能实例分析

本文主要为大家分享一篇关于vue的购物车checkbox全选和反选等功能实例分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。

由于逻辑相对简单，直接附上代码咯！愿君多采撷~~~~

html代码:

        id: {{selectedData}}    
                    
                                            
            
                
{{item.value}}价格：{{item.price}}
            
            

登录后复制

.Vue文件代码:

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.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  -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: "选择购卡学生"    };  }};

登录后复制

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全选和反选等功能实例分析的详细内容，更多请关注【创想鸟】其它相关文章！