• vue购物车实战

    1.引入vue

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

    2.设置高亮部分的样式

    1. 	<style> 
    2. 	   table tr{
    3. 		  text-align: center;
    4. 	   }
    5. 	   .skyblue{
    6. 		   background-color: skyblue;
    7. 	   }
    8. 	style>

    3.设置body的基本样式

    1. <div id="app" >  
    2. 		<table border="1px solid black" style="width:500px;" >
    3. 			<thead>
    4. 				<tr >
    5. 					<td>选中td>
    6. 					<td>图片td>
    7. 					<td>单价td>
    8. 					<td>个数td>
    9. 					<td>小计td>
    10. 					<td>操作td>
    11. 				tr> 
    12. 			thead>	
    13. 			
    14. 			<tbody v-if="list.length>0">
    15. 			    <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}">
    16. 				<td><input type="checkbox" v-model="item.isCheck">td> 
    17. 				<td>{{item.name}}td>
    18. 				<td>{{item.price}}td>
    19. 				<td>
    20. 				<button :disabled="item.num<=1" @click="sub(item.id)">-button>
    21. 				{{item.num}}
    22. 				<button @click="add(item.id)">+button>td>
    23. 				<td>{{item.price*item.num}}td>
    24. 				<td> <button @click="del(item.id)">delbutton> td>
    25. 				tr> 
    26. 			tbody>
    27. 			
    28. 			<tbody v-else>
    29. 			    <tr >
    30. 				<td colspan="6">空空如也td> 
    31. 				tr> 
    32. 			tbody>
    33. 			 
    34.             <tfoot>
    35. 				<tr>
    36. 					<td colspan="6" >
    37. 					全选<input type="checkbox" v-model="isAll">
    38. 					总价：￥ {{jiage}} 
    39. 					<button @click="j()">结算{{zongshu}}button>
    40. 					td>
    41. 				tr>
    42. 			tfoot>
    43. 			
    44. 		table>
    45. 		
    46. 		 
    47. 				 
    48. 		 div>

    4.设置js的逻辑

    1.

    完整代码如下

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>水果购物车title>
    6. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">script> 
    7. 	<style> 
    8. 	   table tr{
    9. 		  text-align: center;
    10. 	   }
    11. 	   .skyblue{
    12. 		   background-color: skyblue;
    13. 	   }
    14. 	style> 
    15. 	head>
    16. 	
    17.                
    18. 	
    19. 	
    20. 	<body>
    21. 		<div id="app" >  
    22. 		<table border="1px solid black" style="width:500px;" >
    23. 			<thead>
    24. 				<tr >
    25. 					<td>选中td>
    26. 					<td>图片td>
    27. 					<td>单价td>
    28. 					<td>个数td>
    29. 					<td>小计td>
    30. 					<td>操作td>
    31. 				tr> 
    32. 			thead>	
    33. 			
    34. 			<tbody v-if="list.length>0">
    35. 			    <tr v-for="(item,index) in list" :key="item.id" :class="{skyblue:item.isCheck}">
    36. 				<td><input type="checkbox" v-model="item.isCheck">td> 
    37. 				<td>{{item.name}}td>
    38. 				<td>{{item.price}}td>
    39. 				<td>
    40. 				<button :disabled="item.num<=1" @click="sub(item.id)">-button>
    41. 				{{item.num}}
    42. 				<button @click="add(item.id)">+button>td>
    43. 				<td>{{item.price*item.num}}td>
    44. 				<td> <button @click="del(item.id)">delbutton> td>
    45. 				tr> 
    46. 			tbody>
    47. 			
    48. 			<tbody v-else>
    49. 			    <tr >
    50. 				<td colspan="6">空空如也td> 
    51. 				tr> 
    52. 			tbody>
    53. 			 
    54.             <tfoot>
    55. 				<tr>
    56. 					<td colspan="6" >
    57. 					全选<input type="checkbox" v-model="isAll">
    58. 					总价：￥ {{jiage}} 
    59. 					<button @click="j()">结算{{zongshu}}button>
    60. 					td>
    61. 				tr>
    62. 			tfoot>
    63. 			
    64. 		table>
    65. 		
    66. 		 
    67. 				 
    68. 		 div> 
    69. 		
    70. 		<script>
    71. 			const ddd =[{id:1,name:"苹果",price:30,num:3,isCheck:true},
    72. 						{id:2,name:"火龙果",price:50,num:10,isCheck:true},
    73. 						{id:3,name:"香蕉",price:20,num:300,isCheck:false},
    74. 						{id:4,name:"西瓜",price:100,num:20,isCheck:true},
    75. 						]
    76. 						
    77. 			const app=new Vue({
    78. 				el:'#app',
    79. 				data:{
    80. 					list:JSON.parse(localStorage.getItem("list"))||ddd
    81. 				},
    82. 				methods:{ 
    83. 					del(a){
    84. 						this.list =	this.list.filter(item => item.id !== a )
    85. 					},
    86. 					add(a){
    87. 						const l=this.list.find(item=>item.id ===a)
    88. 						// console.log(l)
    89. 						l.num++
    90. 						},
    91. 					sub(a){
    92. 						const l=this.list.find(item=>item.id ==a)
    93. 						l.num--
    94. 					},
    95. 					j(){ 
    96. 					var s=	this.list.reduce((sum,item)=>item.isCheck?sum+item.num:sum,0)
    97. 					var s1=	this.list.reduce((sum,item)=>item.isCheck?sum+item.num*item.price:sum,0)
    98. 						alert("您共购买"+s+"个商品，花了"+s1+"元")
    99. 					}
    100. 				},
    101. 				computed:{
    102. 					 isAll:{
    103. 						get(){ return this.list.every(a=>a.isCheck===true)},
    104. 						set(a){
    105. 							this.list.forEach(b=>b.isCheck=a)
    106. 						} 
    107. 					 },
    108. 					   jiage(){
    109. 						   return this.list.reduce((a,b)=>(b.isCheck?a+b.num*b.price:a),0)
    110. 					   },
    111. 					   zongshu(){ 
    112. 						return this.list.reduce((a,b)=>(b.isCheck?a+b.num:a),0)
    113. 					   }
    114. 				},
    115. 				watch:{
    116. 					list:{ 
    117. 						deep:true,//深度监视  
    118. 						handler(newValue){  
    119. 						localStorage.setItem("list",JSON.stringify(newValue))
    120. 			
    121. 						}   
    122. 						}  ,
    123. 				 }  
    124. 				})
    125. 			
    126. 		script>
    127. 		
    128. 	body>
    129. html>

  • 相关阅读:
    爱摸鱼的TT~自学Java从入门到入土学习手册
    【数据结构】绪论
    SpringBoot日志基础
    vue3详解
    栈和队列经典oj面试题
    Vue+ElementUI—环境搭建
    3_springboot_shiro_jwt_多端认证鉴权_Redis缓存管理器.md
    python pygame入门 - 安装测试篇
    CrossOver2024下载安装详细图文教程
    shiro
  • 原文地址：https://blog.csdn.net/weixin_68926017/article/details/136407742