vue小案例，vue 简单实现购物车功能，vue入门小案例

最新推荐文章于 2024-03-19 08:45:49 发布

能c能v

最新推荐文章于 2024-03-19 08:45:49 发布

阅读量346

点赞数

分类专栏： vue.js 原创文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43391160/article/details/102838534

版权

原创同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

vue.js

18 篇文章 0 订阅

订阅专栏

1.主要是用了computed计算属性，sum的变化依赖goods，页面初始化就可以实现sum的计算。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>vue购物车</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	</head>
	<style type="text/css">
		.box {
			width: 800px;
			margin: 0 auto;
		}

		.table-bordered>tbody>tr>th,
		.table-bordered>tbody>tr>td {
			text-align: center;
		}

		.table>tbody+tbody {
			border: 0;
		}

		.table {
			margin-bottom: 0;
		}

		.sum {
			height: 20px;
			width: 800px;
			margin: 0 auto;
		}
	</style>
	<body>
		<div class="box row" id="demo">
			<table class="table table-bordered">
				<tr>
					<th>ID</th>
					<th>商品名称</th>
					<th>日期</th>
					<th>价格</th>
					<th>数量</th>
					<th>小计</th>
					<th>操作</th>
				</tr>
				<tbody>
					<tr v-for="(item,index) in goods">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.time}}</td>
						<td>￥{{item.price}}.00</td>
						<td>
							<button type="button" @click="addAndSub(index,'sub')">-</button>
							<span>{{item.count}}</span>
							<button type="button" @click="addAndSub(index,'add')">+</button>
						</td>
						<td>￥{{item.price * item.count}}.00</td>
						<td>
							<a href="javascript:;" @click="del(index)">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="sum">
				<span>商品总价:</span>
				<span>￥{{total}}.00</span>
			</div>
		</div>

	</body>
</html>
<script src="js/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/bootstrap.min.js"></script>
<script>
	let time = new Date()
	let y = time.getFullYear()
	let m = time.getMonth() + 1
	let d = time.getDate()
	let H = time.getHours()
	let min = time.getMinutes()
	let myDate = y + '-' + m + '-' + d + '-' + H + ':' + min
	let goods = [{
			name: '炸酱面',
			time: myDate,
			price: 4,
			count: 2,
			sub: 4
		},
		{
			name: '裹粉',
			time: myDate,
			price: 2,
			count: 4,
			sub: 3
		},
		{
			name: '方便面',
			time: myDate,
			price: 5,
			count: 3,
			sub: 5
		},
		{
			name: '洗发水',
			time: myDate,
			price: 2,
			count: 1,
			sub: 2
		},
		{
			name: '沐浴露',
			time: myDate,
			price: 3,
			count: 2,
			sub: 6
		}
	]



	let app = new Vue({
		el: '#demo',
		data: {
			goods,
			// total:0
		},
		// created () {
		// 	this.Total()
		// },
		computed: {
			// 成为了组件中的数据  相当于定义data  这个的值是通过计算出来的
			total: function() {
				// 使用计算属性computed,good变化,sum跟着变化
				let total = 0;
				for (var prop of this.goods) {
					// 总价
					total += prop.price * prop.count
				}
				return total
			}
		},
		methods: {
			// 改变数量
			addAndSub(index, str) {
				if (str === "add") {
					this.goods[index].count++;
				} else {
					this.goods[index].count > 0 ?
						this.goods[index].count--
						:
						(this.goods[index].count = 0);
				}
			},
			del(index) {
				this.goods.splice(index, 1)
			}
		}
	})
</script>

能c能v

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue小案例，vue 简单实现购物车功能，vue入门小案例

1.主要是用了computed计算属性，sum的变化依赖goods，页面初始化就可以实现sum的计算。2.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫