vue.js 和 bootstrap 实现简单的购物车

最新推荐文章于 2024-03-05 10:27:11 发布

Little Prince

最新推荐文章于 2024-03-05 10:27:11 发布

阅读量703

点赞数

分类专栏： java web 框架文章标签： vue.js bootstrap

本文链接：https://blog.csdn.net/qq_41843228/article/details/89422748

版权

java web 框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

购物车实现的截图
在这里插入图片描述
详情代码如下：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">  
	<meta name="viewport" content="width=device-width, initial-scale=1.0">  
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<title>一起来购物</title>
</head>

<body>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<div class="container">	
	<div class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title">一起来购物</h3>
	</div>
	<div class="panel-body">

	<div id="app" >
	<template v-if="productList.length">
	<table class="table table-striped" > 
	<fieldset>
	<legend style="text-align: center;">购物车</legend>
	<thead>
		<tr>
			<th><button  class="btn" @click="selectAll">全选/反选</button><button  class="btn" @click="cancelAll">重选</button></th>
			<th></th>
			<th>商品</th>
			<th>单价</th>
			<th>数量</th>
			<th>金额</th>
			<th>操作</th>
		</tr>
	</thead>
	</fieldset>

	<tbody>
		<template v-for='(product , index01) in productList'> 
			<tr >{{product.dept}}</tr>
			<tr v-for="(me , index02) in product.content">
			
				<td><input type="checkbox"  v-model="me.id"/></td>
				<td >{{index02+1}}</td>
				<td >{{me.name}}</td>
				<td >{{me.price}}</td>
				<td ><button class="btn btn-sm" @click="productRed(index01 , index02)" href="javascript:void(0)"> &nbsp - &nbsp</button>&nbsp&nbsp{{me.count}}&nbsp&nbsp
					<button class="btn btn-sm"  @click="productAdd(index01 , index02)"  href="javascript:void(0)">&nbsp + &nbsp</button></td>
				<td >{{me.numprice}}</td>
				<td><button class="btn" @click="removePro(index01, index02)" href="javascript:void(0)">删除</button> </td>
			</tr>
		</template>
		
	</tbody>
	</table>
	</template>
	<div v-else style="text-align: center;"><legend>购物车为空</legend></div>
	<button class="btn" @click="removeSelected" href="javascript:void(0)">删除所选</button>
	<legend ><div class="pull-right">总价为 ￥ {{totalPrice}}	</div></legend>
</div>
</div>
</div>
</div>
	<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data: {

			productList:[
			{
			 	dept:'mobile:',
			 
				content:[{
					id: false,
					name:'iphone8',
					price:6888,
					count:1,
					numprice:6888
				},
				{
					id: false,
					name:'xiaomi9',
					price:2888,
					count:1,
					numprice:2888
				},
				{
					id: false,
					name:'huaweip30',
					price:5888,
					count:1,
					numprice:5888
				}]
			},
			{
			 	dept:'computer:',
			 
				content:[{
					id: false,
					name:'Mac',
					price:12888,
					count:1,
					numprice:12888
				},
				{
					id: false,
					name:'惠普畅游人15',
					price:6888,
					count:1,
					numprice:6888
				},
				{
					id: false,
					name:'联想小新',
					price:7888,
					count:1,
					numprice:7888
				}]
			},
			{
				dept:'books:',
				content:[{
					id: false,
					name:'vue.js入门教程',
					price:88,
					count:1,
					numprice:88
				},
				{
					id: false,
					name:'java入门教程',
					price:68,
					count:1,
					numprice:68
				},
				{
					id: false,
					name:'bootstrap',
					price:98,
					count:1,
					numprice:98
				},
				{
					id: false,
					name:'anujlar',
					price:78,
					count:1,
					numprice:78
				},
				{
					id: false,
					name:'php',
					price:68,
					count:1,
					numprice:78
				}]
			},
			],

		},
		computed:{
			totalPrice : function(){
				var aux = 0;
				for(var i = 0 ; i < this.productList.length ; i++){
					for(var j = 0 ; j < this.productList[i].content.length ; j++){
						if(this.productList[i].content[j].id != false){
							aux = 1;
							break;
						}
					}	
				}
				var total = 0;
				if(aux === 1){
					for(var i = 0 ; i < this.productList.length ; i++){
						for(var j = 0 ; j < this.productList[i].content.length ; j++){
							if(this.productList[i].content[j].id === true){
								total += this.productList[i].content[j].numprice;
							}
						}	
					}
				}else{
					 total = this.countAllprice();
				}
				
				
				return total.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
			}
		},
		methods:{
			removePro:function(index01, index02){
				this.productList[index01].content.splice(index02,1);
				if(this.productList[index01].content.length === 0){
					this.productList.splice(index01,1);
				}
			},
			productAdd:function(index01 , index02){
				this.productList[index01].content[index02].count += 1;
				this.productList[index01].content[index02].numprice = this.productList[index01].content[index02].count * this.productList[index01].content[index02].price;

			},
			productRed:function(index01 , index02){
				if(this.productList[index01].content[index02].count === 1)
					return ;
				this.productList[index01].content[index02].count -= 1;
				this.productList[index01].content[index02].numprice = this.productList[index01].content[index02].count * this.productList[index01].content[index02].price;
			},
			selectAll:function(){
				for(var i = 0 ; i < this.productList.length ; i++){
					for(var j = 0 ; j < this.productList[i].content.length ; j++){
						if(this.productList[i].content[j].id == true){
							this.productList[i].content[j].id = false; 
						}else{
							this.productList[i].content[j].id = true;
						}	
					}	
				}
			},
			cancelAll:function(){
				for(var i = 0 ; i < this.productList.length ; i++){
					for(var j = 0 ; j < this.productList[i].content.length ; j++){
						this.productList[i].content[j].id = false;	
					}	
				}
			},
			removeSelected:function(){
				for(var i = this.productList.length - 1; i >= 0 ; i--){
					for(var j = this.productList[i].content.length - 1; j >= 0 ; j--){
						if(this.productList[i].content[j].id === true){
							this.removePro(i , j);
						}	
					}	
				}
			},
			countAllprice:function(){
				var total = 0;
				for(var i = 0 ; i < this.productList.length ; i++){
					for(var j = 0 ; j < this.productList[i].content.length ; j++){
						total += this.productList[i].content[j].numprice;
					}	
				}
				return total;
			}

		}
		
		
 });
	
	
</script>

	
</body>

</html>

Little Prince

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue.js 和 bootstrap 实现简单的购物车

购物车实现的截图详情代码如下：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...
复制链接

扫一扫