vue购物车实战

时间：2024-03-06 17:46:23

1.引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

2.设置高亮部分的样式

	<style> 
	   table tr{
		  text-align: center;
	   }
	   .skyblue{
		   background-color: skyblue;
	   }
	</style>

3.设置body的基本样式

<div id="app" >  
		<table border="1px solid black" style="width:500px;" >
			<thead>
				<tr >
					<td>选中</td>
					<td>图片</td>
					<td>单价</td>
					<td>个数</td>
					<td>小计</td>
					<td>操作</td>
				</tr> 
			</thead>	
			
			<tbody v-if="list.length>0">
			    <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}">
				<td><input type="checkbox" v-model="item.isCheck"></td> 
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td>
				<button :disabled="item.num<=1" @click="sub(item.id)">-</button>
				{{item.num}}
				<button @click="add(item.id)">+</button></td>
				<td>{{item.price*item.num}}</td>
				<td> <button @click="del(item.id)">del</button> </td>
				</tr> 
			</tbody>
			
			<tbody v-else>
			    <tr >
				<td colspan="6">空空如也</td> 
				</tr> 
			</tbody>
			 
            <tfoot>
				<tr>
					<td colspan="6" >
					全选<input type="checkbox" v-model="isAll">
					总价：￥ {{jiage}} 
					<button @click="j()">结算{{zongshu}}</button>
					</td>
				</tr>
			</tfoot>
			
		</table>
		
		 
				 
		 </div>

4.设置js的逻辑

		<script>
			const ddd =[{id:1,name:"苹果",price:30,num:3,isCheck:true},
						{id:2,name:"火龙果",price:50,num:10,isCheck:true},
						{id:3,name:"香蕉",price:20,num:300,isCheck:false},
						{id:4,name:"西瓜",price:100,num:20,isCheck:true},
						]
						
			const app=new Vue({
				el:'#app',
				data:{
					list:JSON.parse(localStorage.getItem("list"))||ddd
				},
				methods:{ 
					del(a){
						this.list =	this.list.filter(item => item.id !== a )
					},
					add(a){
						const l=this.list.find(item=>item.id ===a)
						// console.log(l)
						l.num++
						},
					sub(a){
						const l=this.list.find(item=>item.id ==a)
						l.num--
					},
					j(){ 
					var s=	this.list.reduce((sum,item)=>item.isCheck?sum+item.num:sum,0)
					var s1=	this.list.reduce((sum,item)=>item.isCheck?sum+item.num*item.price:sum,0)
						alert("您共购买"+s+"个商品，花了"+s1+"元")
					}
				},
				computed:{
					 isAll:{
						get(){ return this.list.every(a=>a.isCheck===true)},
						set(a){
							this.list.forEach(b=>b.isCheck=a)
						} 
					 },
					   jiage(){
						   return this.list.reduce((a,b)=>(b.isCheck?a+b.num*b.price:a),0)
					   },
					   zongshu(){ 
						return this.list.reduce((a,b)=>(b.isCheck?a+b.num:a),0)
					   }
				},
				watch:{
					list:{ 
						deep:true,//深度监视  
						handler(newValue){  
						localStorage.setItem("list",JSON.stringify(newValue))
			
						}   
						}  ,
				 }  
				})
			
		</script>

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水果购物车</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> 
	<style> 
	   table tr{
		  text-align: center;
	   }
	   .skyblue{
		   background-color: skyblue;
	   }
	</style> 
	</head>
	
               
	
	
	<body>
		<div id="app" >  
		<table border="1px solid black" style="width:500px;" >
			<thead>
				<tr >
					<td>选中</td>
					<td>图片</td>
					<td>单价</td>
					<td>个数</td>
					<td>小计</td>
					<td>操作</td>
				</tr> 
			</thead>	
			
			<tbody v-if="list.length>0">
			    <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}">
				<td><input type="checkbox" v-model="item.isCheck"></td> 
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td>
				<button :disabled="item.num<=1" @click="sub(item.id)">-</button>
				{{item.num}}
				<button @click="add(item.id)">+</button></td>
				<td>{{item.price*item.num}}</td>
				<td> <button @click="del(item.id)">del</button> </td>
				</tr> 
			</tbody>
			
			<tbody v-else>
			    <tr >
				<td colspan="6">空空如也</td> 
				</tr> 
			</tbody>
			 
            <tfoot>
				<tr>
					<td colspan="6" >
					全选<input type="checkbox" v-model="isAll">
					总价：￥ {{jiage}} 
					<button @click="j()">结算{{zongshu}}</button>
					</td>
				</tr>
			</tfoot>
			
		</table>
		
		 
				 
		 </div> 
		
		<script>
			const ddd =[{id:1,name:"苹果",price:30,num:3,isCheck:true},
						{id:2,name:"火龙果",price:50,num:10,isCheck:true},
						{id:3,name:"香蕉",price:20,num:300,isCheck:false},
						{id:4,name:"西瓜",price:100,num:20,isCheck:true},
						]
						
			const app=new Vue({
				el:'#app',
				data:{
					list:JSON.parse(localStorage.getItem("list"))||ddd
				},
				methods:{ 
					del(a){
						this.list =	this.list.filter(item => item.id !== a )
					},
					add(a){
						const l=this.list.find(item=>item.id ===a)
						// console.log(l)
						l.num++
						},
					sub(a){
						const l=this.list.find(item=>item.id ==a)
						l.num--
					},
					j(){ 
					var s=	this.list.reduce((sum,item)=>item.isCheck?sum+item.num:sum,0)
					var s1=	this.list.reduce((sum,item)=>item.isCheck?sum+item.num*item.price:sum,0)
						alert("您共购买"+s+"个商品，花了"+s1+"元")
					}
				},
				computed:{
					 isAll:{
						get(){ return this.list.every(a=>a.isCheck===true)},
						set(a){
							this.list.forEach(b=>b.isCheck=a)
						} 
					 },
					   jiage(){
						   return this.list.reduce((a,b)=>(b.isCheck?a+b.num*b.price:a),0)
					   },
					   zongshu(){ 
						return this.list.reduce((a,b)=>(b.isCheck?a+b.num:a),0)
					   }
				},
				watch:{
					list:{ 
						deep:true,//深度监视  
						handler(newValue){  
						localStorage.setItem("list",JSON.stringify(newValue))
			
						}   
						}  ,
				 }  
				})
			
		</script>
		
	</body>
</html>

相关文章