Vue.js_实例_购物车列表

最新推荐文章于 2024-08-17 16:03:52 发布

徐小硕

最新推荐文章于 2024-08-17 16:03:52 发布

阅读量606

点赞数 6

分类专栏： Vue_实例案例文章标签： vue javascript 前端 ajax

本文链接：https://blog.csdn.net/qq_40601005/article/details/105975176

版权

Vue_实例案例专栏收录该内容

4 篇文章 1 订阅

订阅专栏

下面做了一个简单的购物车列表的页面，可以对商品进行管理，全选商品，批量删除，计算商品总价等等。

对新学习vue的同学可以作为小练习进行训练

运行截图如下：

代码中用到了Bootstrap.js框架和axios.js来实现Vue进行异步数据操作

Bootstrap.js链接：Bootstrap.js

axios.js链接：axios.min.js

下面是代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue_实例_购物车列表</title>
		<script src="../vue/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../bootstrap/bootstrap.css" />
		<script src="../js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../vue/axios.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<h3 style="text-align: center;">购物车列表</h3>
			<div id="list">
				<div class="panel panel-default">
					<div class="page-heading">
						<div class="panel-body">
							<template v-if="list.length">
								<table class="table table-bordered table-hover table-striped" style="text-align: center;">
									<thead style="background-color: #7A8B8B;">
										<tr>
											<td><input style="width: 17px ;height: 17px;" type="checkbox" id="allcheck" @click="allcheck(event)" :checked="list.length===listIds.length && listIds.length" /></td>
											<td>商品名称</td>
											<td>商品价格(元)</td>
											<td>购买数量</td>
											<td>操作</td>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(item,index) in list" :key="index">
											<td><input style="width: 17px ;height: 17px;" type="checkbox" name="boxs" :value="index" @click="checkedOne(item.id)" :checked="listIds.indexOf(item.id)>=0" /></td>
											<td>{{item.name}}</td>
											<td>{{item.price}}￥</td>
											<td>
												<button type="button" class="btn btn-sm" @click="del(index)" :disabled="item.count===0">-</button>{{item.count}}
												<button type="button" class="btn btn-sm" @click="add(index)">+</button>
											</td>
											<td>
												<button type="button" class="btn btn-sm" @click="move(index)">删除</button>
											</td>
										</tr>
									</tbody>
								</table>
							</template>
							<div v-else>购物车为空！</div>
						</div>
						<div class="panel-footer">
							共{{total}}元！
							<button type="button" class="btn btn-xs" style="float: right;" :disabled="listIds.length==0" @click="deleteAll">批量删除</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#list",
				data(){
					return{
						isCheckedAll: false,
						listIds: [],
						list: []
					}
				},
				computed:{
					//计算总价
					total:function(){
						var total = 0;
						for (var i = 0; i < this.listIds.length; i++) {
							var n = this.listIds[i];
							var item = this.list.find((element) => (element.id == n));
							total += item.count * item.price;
						}
						return total.toString().replace(/B(?=(\d{3})+$)/g,",");
					}
				},
				methods:{
					//选取一个数据
					checkedOne(listId){
						let idIndex = this.listIds.indexOf(listId);
						if (idIndex >= 0) {	//如果listIds中已经包含就去除
							this.listIds.splice(idIndex,1);
						} else{	//如果listIds中没有包含就添加
							this.listIds.push(listId);
						}
					},
					//购买数量减少
					del:function(index){
						//当数量为0时返回，并不能再做减少操作
						if(this.list[index].count ===0) return;
						this.list[index].count--;
					},
					//购买数量增加
					add:function(index){
						this.list[index].count++;
					},
					//删除此条操作
					move:function(index){
						this.listIds = []
						this.list.splice(index,1)
					},
					//全选操作
					allcheck:function(e){
						this.isCheckedAll = e.target.checked;
						if (this.isCheckedAll) {//全选时
							this.listIds = [];
							this.list.forEach(item => {
								this.listIds.push(item.id);
							})
						} else{
							this.listIds = []
						}
					},
					//批量删除操作
					deleteAll:function(){
						//过滤
						this.list = this.list.filter(function(item){return vm.listIds.indexOf(item.id) === -1} );
						this.listIds = []
					}
				},
				//axios异步加载数据
				mounted(){
					axios.get('../data/listData.json')
					.then(function(res){
						console.log(res.data)
						vm.list = res.data
					}).catch(function(error){
						console.log(error)
					})
				}
			})
		</script>
	</body>
</html>

listData.json数据：

[{
		"id": 1,
		"name": "联想电脑",
		"price": 4500,
		"count": 1
	},
	{
		"id": 2,
		"name": "戴尔电脑",
		"price": 6500,
		"count": 1
	},
	{
		"id": 3,
		"name": "苹果电脑",
		"price": 8000,
		"count": 1
	},
	{
		"id": 4,
		"name": "华硕电脑",
		"price": 6000,
		"count": 1
	},
	{
		"id": 5,
		"name": "小米电脑",
		"price": 5000,
		"count": 1
	}
]