vue简易购物车（用到计算属性）

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

易心i

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

阅读量1.9k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45111741/article/details/101157650

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一.vue简易购物车

一.vue简易购物车

1.引入 vue文件和bootstrap样式

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
		 crossorigin="anonymous">

2.用vue先给表格添加数据

① 把数据放到一个数组里面

data() {
					return {
						book: [{
							id: 1,
							bookname: '平凡的世界',
							count: 1,
							price: 20,
						}, {
							id: 2,
							bookname: '悲惨世界',
							count: 2,
							price: 20,
						}, {
							id: 3,
							bookname: '冬泳',
							count: 1,
							price: 20,
						}, {
							id: 4,
							bookname: '白说',
							count: 1,
							price: 20,
						}]


					}

				}

② 然后再到上面的表格去绑定数据

（利用 v-for 指令）

<table class="table" style="width: 800px;text-align: center;" border="1">
						<tr>
							<td>书本编号</td>
							<td>书名</td>
							<td>书本数量</td>
							<td>价格</td>
							<td>总价</td>
							<td>操作</td>
						</tr>
						<tr v-for="(item,index) in book">
							<td>{{item.id}}</td>
							<td>{{item.bookname}}</td>
							<td><button class="btn btn-default" v-on:click="add(item)">+</button><input v-on:input="upd(item)" v-model="item.count" type="text"
								 style="width: 20px;text-align: center;" /><button class="btn btn-default" @click="del(item)">-</button></td>
							<td>￥<input v-model="item.price" type="text" style="width: 40px;text-align: center;" /></td>
							<td> ￥{{item.count*item.price}}</td>
							<td><button class="btn btn-default" @click="remove(index)">删除</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-default" style="" @click="push()">添加</button></td>
						</tr>
						<tr>
							<td colspan="6">总价:￥{{sum}}</td>
						</tr>
					</table>

③绑定好数据之后，添加两个事件

（删除和添加书本）
删除事件

this.book.splice(数组的下标 , 1)

添加事件

push() {
						// let a = prompt("请输入ID");
						this.book.push({
							id: 5,
							bookname: '和平与爱',
							count: 1,
							price: 34,


						})

④ 随着数量的改变，价格也跟着变化

计算总价是用到了计算属性
遍历数组，累加

	computed: {
					sum() {
						let total = 0;
						for (let i = 0; i < this.book.length; i++) {
							total += parseInt(this.book[i].count) * parseInt(this.book[i].price);

						}
						return total;

					}
				}

页面效果为
在这里插入图片描述
所有代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
		 crossorigin="anonymous">
		<title>简易购物车</title>

	</head>
	<body>

		<div id="app">
			<ul>
				
				<div align="center">
					<br /> <br />
					<h3>Vue简易购物车</h3>
					<br /> <br />
					<table class="table" style="width: 800px;text-align: center;" border="1">
						<tr>
							<td>书本编号</td>
							<td>书名</td>
							<td>书本数量</td>
							<td>价格</td>
							<td>总价</td>
							<td>操作</td>
						</tr>
						<tr v-for="(item,index) in book">
							<td>{{item.id}}</td>
							<td>{{item.bookname}}</td>
							<td><button class="btn btn-default" v-on:click="add(item)">+</button><input v-on:input="upd(item)" v-model="item.count" type="text"
								 style="width: 20px;text-align: center;" /><button class="btn btn-default" @click="del(item)">-</button></td>
							<td>￥<input v-model="item.price" type="text" style="width: 40px;text-align: center;" /></td>
							<td> ￥{{item.count*item.price}}</td>
							<td><button class="btn btn-default" @click="remove(index)">删除</button>&nbsp;&nbsp;&nbsp;<button class="btn btn-default" style="" @click="push()">添加</button></td>
						</tr>
						<tr>
							<td colspan="6">总价:￥{{sum}}</td>
						</tr>
					</table>
				</div>


			</ul>
		</div>


		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						book: [{
							id: 1,
							bookname: '平凡的世界',
							count: 1,
							price: 20,
						}, {
							id: 2,
							bookname: '悲惨世界',
							count: 2,
							price: 20,
						}, {
							id: 3,
							bookname: '冬泳',
							count: 1,
							price: 20,
						}, {
							id: 4,
							bookname: '白说',
							count: 1,
							price: 20,
						}]


					}

				},
				computed: {
					sum() {   //求总价
						let total = 0;
						for (let i = 0; i < this.book.length; i++) {
							total += parseInt(this.book[i].count) * parseInt(this.book[i].price);

						}
						return total;

					}
				},
				methods: {
					add(v) {  //点击按钮时，数量添加

						if (v.count < 100) {
							v.count = v.count + 1;
						}
					},
					del(v) {  //点击按钮时，数量减一
						if (v.count > 1) {
							v.count = v.count - 1;
						}
					},
					remove(v) {  //删除数据
						this.book.splice(v, 1)
					},
					upd(v) { //修改文本框的数量
						if (v.count >= 100) {
							v.count = 100;
						} else if (v.count < 1) {
							v.count = 1;
						}
					},
					push() { //添加死的数据
						// let a = prompt("请输入ID");
						this.book.push({
							id: 5,
							bookname: '和平与爱',
							count: 1,
							price: 34,


						})



					}

				}
			})
		</script>







	</body>
</html>

易心i

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
vue简易购物车（用到计算属性）

文章目录一.vue简易购物车1.引入 vue文件和bootstrap样式2.用vue先给表格添加数据① 把数据放到一个数组里面② 然后再到上面的表格去绑定数据③绑定好数据之后，添加两个事件④ 随着数量的改变，价格也跟着变化一.vue简易购物车1.引入 vue文件和bootstrap样式<script src="https://cdn.bootcss.com/vue/2.6.10/v...
复制链接

扫一扫