利用computed计算属性写购物车商品计算价格 （会用到数组的方法reduce做聚合操作）

    <div id="app">
      <h1>购物车</h1>
      <input type="checkbox" v-model="checkedAll" />全选
      <ul>
        <li v-for="product in products">
          <input type="checkbox" v-model="product.checked" />{{product.name}}
          <span style="color: deeppink;">{{product.price}}</span>
          
          <!--  给个按钮-->
            <button @click="subtract(product)">-</button>
          		<span>{{product.amount}}</span>
          <button @click="product.amount++">+</button>
        </li>
      </ul>
      <p>总价:{{sumPrice}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          products: [
            {
              id: 1,
              amount: 1, // 数量
              name: "Mac mini 2020", // 物品名称
              price: 8000, // 单价
              checked: false, // 选中状态
            },
            {
              id: 2,
              amount: 1,
              name: "red Mi Pro",
              price: "5000",
              checked: false,
            },
            {
              id: 3,
              name: "手办",
              price: 100,
              amount: 1,
              checked: false,
            },
          ],
        },
        methods: {
	        //减法操作 判断数量小于1的时不为负数
		  	subtract(product){ // 接收一个参数
	            console.log(product) // 这里接受的参数是一个对象
	            product.amount--
	            if(product.amount<1){ // 对象的数量 下图
	              product.amount = 0
	            }
	          }
		},
        computed: {
          sumPrice() { // 计算总价格 
            // reduce（）方法是对数组中的数据做聚合操作
            //    接收两个参数
	            //   参数一 回调函数
	            		// 参数1：表示上一次的值(上一次的计算结果，第一次时候传递的是初始值)
			            //  参数二2：当前项
	            //   参数二 初始值
            return this.products.reduce(function (pre, cur) {
              console.group("reduce执行了");
              console.log(pre); // 上一次的值
              console.log(cur); // 当前项
              console.groupEnd();
              return pre + cur.price * cur.amount;
            }, 0); // 0是初始值
            // 下边是简写
            // return this.products
            //   .filter((item) => item.checked)
            //   .reduce((pre, cur) => pre + cur.price * cur.amount, 0);
          },

         全选按钮操作
          checkedAll: {
            get() {
              return (
                // 判断选中的长度是否等于总长度
                this.products.filter((item) => item.checked).length ===
                this.products.length
              );
            },
            set(val) {
              this.products.forEach((item) => (item.checked = val));
            },
          },
        },
      });
    </script>