vue购物车实战

流殇꧂2024-03-02 14:52

1.引入vue

html 复制代码 
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

2.设置高亮部分的样式

html 复制代码 
	<style> 
	   table tr{
		  text-align: center;
	   }
	   .skyblue{
		   background-color: skyblue;
	   }
	</style>

3.设置body的基本样式

html 复制代码 
<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的逻辑

javascript 复制代码 
		<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>

完整代码如下

html 复制代码 
<!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>
相关推荐
知识分享小能手13 小时前
微信小程序入门学习教程，从入门到精通，自定义组件与第三方 UI 组件库（以 Vant Weapp 为例） (16）
前端·学习·ui·微信小程序·小程序·vue·编程
瓯雅爱分享2 天前
Java+Vue构建的采购招投标一体化管理系统，集成招标计划、投标审核、在线竞价、中标公示及合同跟踪功能，附完整源码，助力企业实现采购全流程自动化与规范化
java·mysql·vue·软件工程·源代码管理
苏打水com2 天前
前端框架深度解析：Vue 从入门到实战，掌握渐进式开发核心
vue
棋子一名3 天前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
苏打水com3 天前
前端框架深度解析：Vue.js 3 从 Composition API 到生态升级，解锁企业级开发新能力
vue
知识分享小能手3 天前
微信小程序入门学习教程，从入门到精通，微信小程序核心 API 详解与案例(13）
前端·javascript·学习·react.js·微信小程序·小程序·vue
小灰灰的可爱无人可替代3 天前
记录一次使用docker和docker-compose更新vue前端项目问题
nginx·docker·vue
java水泥工5 天前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
爱看书的小沐6 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker（Three.JS/ vue / react / WebGL）
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手7 天前
微信小程序入门学习教程，从入门到精通，WXS语法详解(10）
前端·javascript·学习·微信小程序·小程序·vue·团队开发
热门推荐
01BongoCat - 跨平台键盘猫动画工具02两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答03GitHub 镜像站点04智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践052025羊城杯网络安全大赛 wp06UV安装并设置国内源07Linux下V2Ray安装配置指南08Spring Boot 实现微信登录，So Easy !09Cursor Plan Mode：AI 终于知道先想后做了105大DOM/BOM核心考点：从入门到精通，让面试官眼前一亮