Vue实现简单版的购物车

最新推荐文章于 2024-04-27 09:42:37 发布

心动的代码~

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量621

点赞数 3

分类专栏：原创文章标签： Vue实现简单版的购物车

本文链接：https://blog.csdn.net/weixin_45139031/article/details/99872721

版权

原创专栏收录该内容

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue实现简单版的购物车

首先我们要导入Vue的js <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>还有导入这次我用到了bootstrap来布局<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" ...
复制链接

扫一扫

专栏目录