基于vue.js的购物车demo

最新推荐文章于 2022-02-10 17:25:42 发布

屌程

最新推荐文章于 2022-02-10 17:25:42 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/heaven_evil/article/details/88931244

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：购物车展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量、操作和购买总价。其中购买数量可以增加或减少，每类商品可以从购物车中移除。

在浏览器上的运行结果：

源代码共三个文件：index.html、index.js、style.css：

index.html主要包含页面信息：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>淘宝购物车</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="app" v-cloak>
		<template v-if="list.length">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
			    <tbody>
					<tr v-for = "(item, index) in list">
						<td>{{ index + 1 }}</td>
						<td>{{ item.name }}</td>
						<td>{{ item.price }}</td>
						<td>
							<button 
								@click="handleReduce(index)"
								:disabled="item.count === 1">-</button>
							{{ item.count }}
							<button @click="handleAdd(index)">+</button>
						</td>
						<td>
							<button @click="handleRemove(index)">移除</button>
						</td>
					</tr>
			    </tbody>
			</table>
			<div id="totalPrice">总价: ￥{{ totalPrice }}</div>
		</template>
		<div v-else>购物车为空</div>
	</div>
	<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
	<script src="index.js"></script>
</body>
</html>

index.js主要包含数据(data)和相关处理函数的实现，主要用到vue的methods(方法)和computed(计算属性)：

var app = new Vue({
	el: '#app',
	data: {
		list: [
			{
				id: 1,
				name: 'iphone 7',
				price: 6088,
				count: 1
			},
			{
				id: 2,
				name: 'iphone 8',
				price: 8088,
				count: 10
			},
			{
				id: 3,
				name: 'iphone 10',
				price: 10088,
				count: 100
			}
		]
	},
	computed: {
		totalPrice: function () {
			var total = 0;
			for (var i=0; i < this.list.length; ++i) {
				var item = this.list[i];
				total += item.price * item.count;
			}
			return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
		}
	},
	methods: {
		handleReduce: function (index) {
			if(this.list[index].count === 1) {
				return;
			} else {
				--this.list[index].count;
			}
		},
		handleAdd: function (index) {
			++this.list[index].count;
		},
		handleRemove: function (index) {
			this.list.splice(index, 1);
		}
	}
});

style.css主要包含了页面展示的样式表：

[v-cloak] {
	display: none;
}

table{
	border: 1px solid #000;
}
th, td{
	padding: 8px 16px;
	border: 1px solid #000;
	text-align: left;
}
th{
	background: #f7f7f7;
	color: #5cb677;
	font-weight: 600;
	white-space: nowrap;
}
td{
	color: red;
}
button{
	color: red;
	background-color: yellow;
	border-radius: 2px;
}
#totalPrice{
	font-family: 微软雅黑;
	font-size: 32;
	color: gray;
}

屌程

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基于vue.js的购物车demo

需求：购物车展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量、操作和购买总价。其中购买数量可以增加或减少，每类商品可以从购物车中移除。在浏览器上的运行结果：源代码共三个文件：index.html、index.js、style.css：index.html主要包含页面信息：<!DOCTYPE html><html><head&g...
复制链接

扫一扫