VUE简单购物车案例

最新推荐文章于 2023-07-21 20:27:24 发布

新医

最新推荐文章于 2023-07-21 20:27:24 发布

阅读量133

点赞数

分类专栏：学习文章标签： vue.js html vue

本文链接：https://blog.csdn.net/qq_27462573/article/details/118068184

版权

学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

VUE简单购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车案例</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="root">
		<div>
			<h1>产品列表</h1>
			<ul>
				<li v-for="product in products" :key=product.id>
					{{product.name}}-￥{{product.price}}
					<button :disabled="product.inventory === 0 " @click="addTpCart(product)">放入购物车</button>
				</li>
			</ul>
		</div>
		<div>
			<h1>购物车</h1>
			<ul>
				<li v-for="(cart,index) in carts">
					{{cart.name}} : {{cart.quantity}}x{{cart.price}}={{cart.quantity*cart.price}}
				</li>
			</ul>
		</div>
		<div v-if="totalPrice >0">
			{{totalPrice}}
		</div>
    </div>

    <script>
        var vm = new Vue({
            el:'#root',
			data: {
				products:[],
				carts:[]
			},
			mounted() {
				fetch('../doc/products.json')
				.then(response => response.json())
				.then(result =>{
					this.products = result.data
					console.log(result);
				})
			},
			methods:{
				addTpCart(product){
				let result = this.carts.find(value=> value.id === product.id)
				
				//此产品库存减1
				product.inventory--
				console.log(product.inventory);
				//放入购物车
				
				if (result) {
					result.quantity++
				}else{
					let {id,name,price} = product
					this.carts.push({
						id,
						name,
						quantity:1,
						price
					})
				}
				}
			},
        computed:{
			totalPrice(){
				 return this.carts.reduce((sum,value)=>{
					 sum += value.price * value.quantity
					 return sum
				},0)
			}
		}
		})
    </script>
</body>
</html>

效果图
在这里插入图片描述
JSON文件

{
	"ret":true,
	"data":[
		{
			"id":"001",
			"name":"iPhone12 pro",
			"price":8900,
			"inventory":3
		},
		{
			"id":"002",
			"name":"iPhone11 pro",
			"price":6000,
			"inventory":5
		},
		{
			"id":"003",
			"name":"iPhone10 pro",
			"price":3000,
			"inventory":10
		},
		{
			"id":"004",
			"name":"iPhone8 plus",
			"price":2000,
			"inventory":8
		}
	]
}