vue简易购物车效果

最新推荐文章于 2022-11-22 13:35:24 发布

as_long_

最新推荐文章于 2022-11-22 13:35:24 发布

阅读量200

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/as_long_/article/details/120604750

版权

本文介绍了如何使用Vue.js实现一个简易购物车功能。购物车包括点击添加商品、显示商品数量、总价以及库存检查。通过Promise获取JSON数据，动态渲染商品列表，并在商品库存为0时禁用添加按钮。当点击添加购物车时，商品数量减一，同时更新购物车中的商品数量。此外，还计算了购物车中所有商品的总价。

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

一、介绍

简易购物车包含点击向下添加商品，数量、总价、数量和库存相等无法点击。

页面展示：

二、代码

首先使用promise获取json里的数据：

mounted() {
				//fetch和ajax一样，配合promise函数使用,response返回json字符串
				//把传过来的数据转为json对象
				fetch('简易购物车.json').then(response => response.json()).
				then(reust => {
					//reust.data是json里面的data存到数组里面
					this.product = reust.data
				})
			}

json：

{
	"ret":true,
	"data":[{
		"id":"001",
		"name":"iPhone12",
		"price":8900,
		"amount":5,
		"quantity":1,
		"total":8900,
		"check":false
	},{
		"id":"002",
		"name":"iPhone11",
		"price":6000,
		"amount":8,
		"quantity":1,
		"total":6000,
		"