基于vue2的简易购物车

包含功能：

全选；删除；统计总价；统计总数等

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          // 水果列表
          fruitList: [
            {
              id: 1,
              icon: "./img/火龙果.png",
              isChecked: true,
              num: 2,
              price: 6,
            },
            {
              id: 2,
              icon: "./img/荔枝.png",
              isChecked: false,
              num: 7,
              price: 20,
            },
            {
              id: 3,
              icon: "./img/榴莲.png",
              isChecked: false,
              num: 3,
              price: 40,
            },
            {
              id: 4,
              icon: "./img/鸭梨.png",
              isChecked: true,
              num: 10,
              price: 3,
            },
            {
              id: 5,
              icon: "./img/樱桃.png",
              isChecked: false,
              num: 20,
              price: 34,
            },
          ],
        },
        watch: {
          fruitList:{
            deep:true,
            handler(newVal){
              // 我不想存本地就没写完这个功能
              // localStorage.setItem('list',JSON.stringify(newVal))
            }
          }
        },
        computed: {
          // 全选
          isAll:{
            get(){
              return this.fruitList.every((e) => !!e.isChecked);
            },
            set(val){
              this.fruitList.map((m) => (m.isChecked = val));
            }
           
          },
          // 统计总价
          totalPrice() {
            return this.fruitList.reduce((price, item) => {
              return item.isChecked ? price + item.price * item.num : price;
            }, 0);
          },
          // 统计总数
          totalCount() {
            return this.fruitList.reduce((sum, item) => {
              return item.isChecked ? sum + item.num : sum;
            }, 0);
          },
        },

        methods: {
          // 个数-
          decrease(id) {
            // 根据id找到对应数组项 -> find
            const fruit = this.fruitList.find((f) => f.id === id);
            fruit.num > 0 && fruit.num--;
          },
          // 个数+
          increase(id) {
            const fruit = this.fruitList.find((f) => f.id === id);
            fruit.num++;
          },
          // 删除
          del(id) {
            this.fruitList = this.fruitList.filter((f) => f.id !== id);
          },
        },
      });
    </script>