小米购物车

最新推荐文章于 2023-11-24 10:00:04 发布

原创

最新推荐文章于 2023-11-24 10:00:04 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

这篇博客讲述了如何在国庆假期期间利用Vue.js和JavaScript实现小米购物车功能。通过Vuex进行数据管理，实现商品数量实时响应，点击加入购物车会跳转到购物车页面并计算总价。数据存储于本地，当数量减少到1时，会显示警告提示。

今天是国庆节，祝伟大的祖国生日快乐！！

假期适当的休息一下，还是要敲敲代码的！冲冲冲

今天我们写的是小米购物车！So easy！

老规矩，先看实现效果

数据直接存储到本地的，在后面我会把数据写上 : ）

左上角的数据是实时响应的，当点击加入购物车时，数量会依次增加。

点击购物车会跳转到购物车页面，里面有两个我们刚刚加入的商品，价格也是直接算好。还有加减数量

当数量减到1个的时候就不能再减了，此时会弹出提示框

1.在vuex中创建数据，将本地存储的数据存进去。

本地数据

[
    {
        "id":1,
        "name":"小米9 SE",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg",
        "price":1999,
        "slogan":"新品看点：弹出式肩键｜真实机械感反馈",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":2,
        "name":"Redmi K40 游戏增强版",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg",
        "price":2999,
        "slogan":"新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":3,
        "name":"小米9 SE",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg",
        "price":3999,
        "slogan":"新品看点：弹出式肩键｜真实机械感反馈",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":4,
        "name":"Redmi K40 游戏增强版",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg",
        "price":4999,
        "slogan":"新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":5,
        "name":"小米9 SE",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg",
        "price":999,
        "slogan":"新品看点：弹出式肩键｜真实机械感反馈",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":6,
        "name":"Redmi K40 游戏增强版",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg",
        "price":2999,
        "slogan":"新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":7,
        "name":"小米9 SE",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg",
        "price":1999,
        "slogan":"新品看点：弹出式肩键｜真实机械感反馈",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":8,
        "name":"Redmi K40 游戏增强版",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg",
        "price":699,
        "slogan":"新品看点：年度旗舰骁龙870，新一代 E4 AMOLED旗舰直屏",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":9,
        "name":"小米9 SE",
        "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5652bd7a2f8bd6daaa1dd4b5c3c2e9b3.jpg",
        "price":799,
        "slogan":"新品看点：弹出式肩键｜真实机械感反馈",
        "totalMount":1,
        "totolPrice":0
    },
    {
        "id":10,

最低0.47元/天解锁文章