当前位置: 首页 > news >正文

Vue如何利用Postman和Axios制作小米商城购物车----简版

实现功能:全选、单选、购物数量显示、合计价格显示

实现效果如下:

思路:

1.数据要利用写在Postman里面,通过地址来调用Postman里面的数据。

2.写完数据后,给写的数据一个名字,然后加上一个空数组,这样的话我们可以在前面用到我们写的数组,可以利用v-for指令来得到相关数据内容。

3.设置初始状态的选中状态为不选中,给是否选中的值为false就可以。

4.利用计算机属性computed来撰写合计总价格、选中数量以及是否全选。总价格为商品数量*商品单价,总的数量等于各个商品的数量之和。

5.当进行商品数量单选或者全选的时候显示可能会不正常,例如出现01、02这样的情况,这时候我们需要进行转换,确保我们的数量是数值类型。

部分核心代码展示(总价、数量、是否选中):

 computed: {

                totalPrice() {

                    let sum = 0;

                    for (let item of this.fruitList) {

                        if (item.isChecked) {

                            sum += item.num * item.price;

                        }

                    }

                    return sum;

                },

                totalCount() {

                    //初始状态数量为0

                    let count = 0;

                    for (let item of this.fruitList) {

                        if (item.isChecked) {

                             //总数量

                            count += item.num;

                        }

                    }

                    return count;

                },

                isAll: {

                    set(value) {

                        for (let item of this.fruitList) {

                            item.isChecked = value;

                        }

                    },

                    get() {

                        return this.fruitList.every((item) => item.isChecked === true);

                    }

                }

            }

最终效果:

相关文章:

  • 在MFC中使用Qt(二):实现Qt文件的自动编译流程
  • 虚拟机Vmware无法连接网络
  • FFmpeg开发学习:AVFormatContext结构体
  • 【大模型基础_毛玉仁】3.4 Prompt 技巧
  • 深度学习四大核心架构:神经网络(NN)、卷积神经网络(CNN)、循环神经网络(RNN)与Transformer全概述
  • C++的IO流
  • hackmyvm-jan
  • 如何在 React 项目中使用React.lazy和Suspense实现组件的懒加载?
  • Linux进程间的通信
  • 如何将3DMax模型转换到Blender?
  • 51单片机
  • 基于代理(http\https\socks)的网络访问逻辑重定义
  • 基于本人的专利设计三角形式的三组定子和中间的分形转子结构
  • 海外营收占比近4成,泡泡玛特全球化战略迎收获期
  • 33.[前端开发-JavaScript基础]Day10-常见事件-鼠标事件-键盘事件-定时器-案例
  • C++ 继承:面向对象编程的核心概念(二)
  • 中文字符计数器,助力所有python对齐业务(DeepSeek代笔)
  • 青藏高原湖泊的数量越来越多
  • Mem0 Prompt优化
  • 从手机到机器人:vivo 凭借用户主义重构科技价值
  • 一个留美学生的思想转向——裘毓麐的《游美闻见录》及其他
  • 朝鲜称将在各领域采取反制措施,应对美国敌对挑衅
  • 南宁一学校发生伤害案件,警方通报:嫌疑人死亡,2人受伤
  • 俄乌直接谈判结束,乌称“毫无成果”
  • 特朗普称即将与伊朗达成核协议,外交部:中方愿继续发挥建设性作用
  • 俄媒:俄乌伊斯坦布尔谈判将于北京时间今天17时30分开始