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 cl