Vue实现简单版的购物车

原创 专栏收录该内容
84 篇文章 0 订阅

首先我们要导入Vue的js

	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

这次我用到了bootstrap的css样式

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">

这个bootstrap的css,我们可以去BootCDN中文网下载
官方网站: https://www.bootcdn.cn/
在搜索框搜索:bootstrap —>然后我们点击我画的红色,然后点击进去,会有很多版本,
在这里插入图片描述
然后我们找到版本4.3.1 ,要复制的是我画红线的那个bootstrap.css
在这里插入图片描述
还有一个Tween.js,是一个很重要的js
你试了就知道它的强大!!! 哈哈哈
在这里插入图片描述
然后找到/tween.js/16.3.4/版本的
在这里插入图片描述

接下来我们就放 购物车的代码:
index.html
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/tween.js/16.3.4/Tween.js"></script>
		
	</head>
	<body>

		<div id="app" class="container">
			<table class="table">
				<thead>
					<tr>
						<th>产品编号</th>
						<th>产品名字</th>
						<th>购买数量</th>
						<th>产品单价</th>
						<th>产品总价</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item , index) in message">
						<td @click="jia(index)">{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>
							<button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
							<input type="text" v-model="item.quantity">
							<button type="button" class="btn tn-primary" @click="add(index)">+</button>
						</td>
						<td>{{item.price | filtermoney}}</td>
						<!--<td>{{arr[index].one}}</td>-->
						<td>{{item.price*item.quantity | filtermoney}}</td>
						<td>
							<button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
						</td>
					</tr>
					<tr>
						<td>总购买价
						</td>
						<td>
							{{animatenum | filtermoney}}
						</td>
						<td>总购买数量
						</td>
						<td>

						</td>
						<td colspan="2">
							<button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
						</td>
					</tr>
				</tbody>
			</table>

			<p v-if="message.length===0">您的购物车为空</p>
		</div>
		
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					totalPrice: 0,
					animatenum: 0,
					message: [{
						id: 001,
						name: '联想笔记本',
						quantity: 0,
						price: 4000
					}, {
						id: 002,
						name: '华硕笔记本',
						quantity: 0,
						price: 5000
					}, {
						id: 003,
						name: '机械师笔记本',
						quantity: 0,
						price: 7000
					}, {
						id: 004,
						name: '苹果笔记本',
						quantity: 0,
						price: 8000
					}]
				},
				watch: {
					toComput2: function(newValue, oldValue) {
						this.tween(newValue, oldValue);
					}
				},
				computed: {
					//计算总金额
					toComput2: function() {
						var vm = this;
						//每次进来要重置总金额
						vm.totalPrice = 0;
						this.message.forEach(function(mess) {
							vm.totalPrice += parseInt(mess.price * mess.quantity);
						})
						return this.totalPrice;
					}
				},
				filters: {
					filtermoney: function(value) {
						return '¥' + value;
					}
				},
				mounted: function() {
					this.tween('0', '0');
				},
				methods: {
					//计算总数的方法为什么写在methods里面就不行?
					toComput: function() {
						var vm = this;
						vm.message.forEach(function(mess) {
							vm.totalPrice += parseInt(mess.price * mess.quantity);
						})
						return vm.totalPrice;
					},
					add: function(index) {
						var vm = this;
						vm.message[index].quantity++;
					},
					subtract: function(index) {
						var vm = this;
						vm.message[index].quantity--;
						if (vm.message[index].quantity <= 0) {
							if (confirm("你确定移除该商品?")) {
								vm.message.splice(index, 1)
							}
						}

					},
					remove: function(index) {
						var vm = this;
						if (confirm("你确定移除该商品?")) {
							vm.message.splice(index, 1)
						}
					},
					empty: function() {
						var vm = this;
						vm.message.splice(0, vm.message.length);
					},
					jia: function(index) {
						var vm = this;
						vm.arr[index].one++;
					},
					tween: function(newValue, oldValue) {
						var vm = this;
						var twen = new TWEEN.Tween({
							animatenum: oldValue
						});

						function animate() {
							requestAnimationFrame(animate);
							TWEEN.update();
						};
						twen.to({
							animatenum: newValue
						}, 750);
						twen.onUpdate(function() {
							//toFixed();保留几位小数
							vm.animatenum = this.animatenum.toFixed();
						})
						twen.start();
						animate();
					}
				}
			});
		</script>

	</body>
</html>

运行效果:
在这里插入图片描述
我们试一下加一下购买数量,在买一台联想笔记本:
我们可以清楚的看到我们的总购买的价格也加了。
在这里插入图片描述
我们在删除一个,我们删除苹果笔记本,
它会提示你是否要删除
在这里插入图片描述
删除成功
在这里插入图片描述

?!!!

  • 3
    点赞
  • 0
    评论
  • 4
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页

打赏作者

心动的代码~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值