vue应试技巧封装实用效果：购物车

前端——散人柚

已于 2022-09-30 15:45:15 修改

阅读量264

点赞数 1

文章标签： javascript 前端 jquery

于 2022-09-30 14:57:40 首次发布

本文链接：https://blog.csdn.net/a13213766526/article/details/127123592

版权

这篇博客分享了Vue中实现购物车功能的两个关键技巧：全选全不选和计算总价。通过封装这些常用但琐碎的操作，可以提升开发效率。

摘要由CSDN通过智能技术生成

这是我自己封存的简单的应试技巧，平日一般会用，简单但是写起来麻烦的小玩意

全选全不选

computed: {
    allChecked: {
      // arr 为渲染页面所用的数组
      // checked 单项数据中多选框的布尔值
      set(val) {
        arr.forEach((item) => (item.checked = val));
      },
      get() {
        // 如果arr不是组件内数据,分支判断这里需使用JSON.parse(JSON.stringify(arr))来进行转化
        if (arr == "") {
          return false;
        } else {
          return (
            arr.filter((item) => item.checked).length ==
            arr.length
          );
        }
      },
    },
  },

计算总价

 computed: {
    calcTotal: function () {
      // arr为渲染页面所用的数组
      // stock 数组内对象的数据，通常为单个的价格
      // num 数组内对象的数据，通常为单项的数量
      let total = 0;
      for (let key in arr) {
        let p = arr[key];
        if (p.checked) {
          total += p.stock * p.num;
        }
      }
      return total;
    },
  },