Vue购物车全选、反选——单选全部选中全选自动选中以及总价计算

1、模拟购物车数据

data() {
    return {
      //模拟购物车数据arr
      arr:[
        {
          ischeck:false, //默认为false
          name:'篮球',
          price:98
        },
        {
          ischeck:false, //默认为false
          name:'足球',
          price:10
        },
        {
          ischeck:false, //默认为false
          name:'羽毛球',
          price:5
        },
        {
          ischeck:false, //默认为false
          name:'排球',
          price:100
        }
      ]
    };
  },

2、渲染购物车页面

<template>
  <div>
    <!-- 购物车数据渲染 -->
    <div v-for="(item,index) in arr" :key="index">
      <p>
        <input type="checkbox" v-model="item.ischeck">
        {{item.name}}  -------价格：{{item.price}}</p>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <input type="checkbox">全选---
    </div>
  </div>
</template>

3、判断数据中ischeck（单选框）的状态，如果都是true，那么全选就一定true

<!-- html -->

<template>
  <div>
    <!-- 购物车数据渲染 -->
    <div v-for="(item,index) in arr" :key="index">
      <p>
        <input type="checkbox" v-model="item.ischeck" @click="changeOne(index)">
        {{item.name}}  -------价格：{{item.price}}</p>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <input type="checkbox" v-model="allcheck">全选---
    </div>
  </div>
</template>

//js

data() {
    return {
      //模拟购物车数据arr
      arr:[
        {
          ischeck:false, //默认为false
          name:'篮球',
          price:98
        },
        {
          ischeck:false, //默认为false
          name:'足球',
          price:10
        },
        {
          ischeck:false, //默认为false
          name:'羽毛球',
          price:5
        },
        {
          ischeck:false, //默认为false
          name:'排球',
          price:100
        }
      ],
      allcheck:false,
    };
  },
methods: {
    //判断全选框是否选中
    all(){
      let _index=this.arr.findIndex(item=>{
        return !item.ischeck
      })
      if(_index==-1){
        this.allcheck=true
      }else{
        this.allcheck=false
      }
    },
    //点击购物车数据中单选框改变ischeck事件
    changeOne(index){
      this.arr[index].ischeck=!this.arr[index].ischeck
    //调用判断
      this.all()
    }
  }, 

4、点击全选按钮，查看allcheck的布尔值是否正确，对购物车数据循环遍历，让数据中的每一项ischeck的值跟着全选变化

//html
<input type="checkbox" v-model="allcheck" @click="changeAll">全选---


//js
changeAll(){
      //取反
      this.allcheck=!this.allcheck
      // 遍历数组arr
      this.arr.forEach(item=>{
        return item.ischeck=this.allcheck
      })
    }

5、全选单选功能就实现了，接着封装一个计算总价的事件方便调用，防止代码频繁重复

//html
<input type="checkbox" v-model="allcheck">全选---总价{{allp}}


//js
//计算总价
    allprice(){
      let _price=0
      //循环数组
      this.arr.forEach(item=>{
        //计算单选框选中状态下的总价
        if(item.ischeck){
          _price+=item.price
        }
        this.allp=_price
      })
    },

6、修改数据时（比如添加新数据，或改变数据的ischeck）需要同步更新，所以在添加数据事件、单选事件，全选事件......调用这个计算函数重新计算更新即可