简易购物车【加全选全不选计算属性和侦听属性】

小咪咪 2023-02-26 04:27 28阅读 0赞

## HTML ##

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Vue.js</title>
    	<link rel="stylesheet" type="text/css" href="style/index.css" />
    	<script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    	
    	<div id="car">
    		<h2>我的购物车>></h2> <hr />
    		<template v-if='product.length!==0'>
    			<table>
    				<thead>
    					<th><input type="checkbox" v-model='isAll' @click='all' title='全选/全不选'/></th>
    					<th>序号</th>
    					<th>品牌</th>
    					<th>品名</th>
    					<th>单价</th>
    					<th>购买数量</th>
    					<th>商品总价</th>
    					<th>操作</th>
    				</thead>
    				<tbody>				
    					<tr v-for='(item,index) of product'>
    						<td><input type="checkbox" v-model='selectProduct' :value='item' /></td>
    						<td>{ { index+1}}</td>
    						<td>{ { item.brand}}</td>
    						<td>{ { item.name}}</td>
    						<td>{ { item.price}}</td>
    						<td>
    							<button @click='item.count--' :disabled='item.count===1'>-</button>
    							{ { item.count}}
    							<button @click='item.count++'>+</button>
    						</td>
    						<td>{ { item.price*item.count}}</td>
    						<td><button @click='btnDelete(index)'>删除</button></td>
    					</tr>
    				</tbody>
    			</table>
    			<p>您的支付金额为：<span class='totalPrice'>￥{ { totalPrice}}</span></p>
    		</template>
    		<p v-else>您的购物车空空如也，请前去首页逛逛！</p>
    	</div>
    	
    
    
    <script type="text/javascript">
    	var vm=new Vue({ 
    		el:'#car',
    		data:{ 
    			product:[
    				{ 
    					id:1,
    					brand:'三星',
    					name:'Galaxy S4',
    					price:2400,
    					count:1
    				},{ 
    					id:2,
    					brand:'Apple',
    					name:'iPhone X',
    					price:5200,
    					count:1
    				},{ 
    					id:3,
    					brand:'Apple',
    					name:'iPad Pro 2018',
    					price:10400,
    					count:1
    				},{ 
    					id:4,
    					brand:'ASUS',
    					name:'S150笔记本电脑',
    					price:4500,
    					count:1
    				},{ 
    					id:5,
    					brand:'联想',
    					name:'L400笔记本电脑',
    					price:3900,
    					count:1
    				}
    			],
    			isAll:false,
    			selectProduct:[]
    		},
    		computed:{ 
    			totalPrice(){ 
    				var sum=0;
    				for(var i=0;i<this.selectProduct.length;i++){ 
    					sum+=this.selectProduct[i].price*this.selectProduct[i].count;
    				}
    				return sum;
    			}
    		},
    		methods:{ 
    			btnDelete(delIndex){ 
    				for(var i=0;i<this.selectProduct.length;i++){ 
    					if(this.selectProduct[i]===this.product[delIndex]){ 
    						this.selectProduct.splice(i,1);
    					}
    				}		
    				this.product.splice(delIndex,1);
    			},
    			all(){ 
    				this.isAll=!this.isAll;
    				if(this.isAll){ 
    					this.selectProduct=[];
    					for(var i=0;i<this.product.length;i++){ 
    						this.selectProduct.push(this.product[i]);
    					}
    				}else{ 
    					this.selectProduct=[];
    				}			
    			}
    		},
    		watch:{ 
    			selectProduct(newValue){ 
    				if(newValue.length===this.product.length){ 
    					this.isAll=true;
    				}else{ 
    					this.isAll=false;
    				}
    			}
    		}
    	})
    </script>
    </body>
    </html>

## CSS ##

#car{ 
    	width:900px;
    	margin:50px auto 0;
    }
    #car table{ 
    	width:100%;
    	border:solid 1px #ccc;
    	border-collapse:collapse;
    }
    #car table th,
    #car table td{ 
    	height:45px;width:100;
    	border:solid 1px #ccc;
    	text-align:center;
    }
    #car .totalPrice{ 
    	font-size:20px;
    	color:#ff5857;
    }

## JS ##