Vue购物车应用-CSDN博客

本文介绍了一个使用Vue.js实现的购物车应用案例，展示了如何通过Vue的数据绑定和组件化特性来管理购物车商品的增删改查，实现商品的批量操作和总价计算。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			table th,
			table td {
				text-align: center;
			}

			input[type='text'] {
				width: 40px;
				text-align: center;
			}
		</style>
	</head>
	<body>

		<div class="cantainer" id='demo'>
			<div class="row">
				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
					<div class="page-header">
						<h2>我的购物车</h2>
					</div>
				</div>
			</div>
			<div class="row" v-show="product.length!=0">
				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
					<table class="table table-hover">
						<thead>
							<th>全选<input type="checkbox" v-model="allStatus" @click="changeAllStatus">
							<button @click="deletaAll" class="btn btn-danger btn-sm">批量删除</button>
							
							</th>
							<th>序号</th>
							<th>品牌</th>
							<th>品名</th>
							<th>单价</th>
							<th>购买数量</th>
							<th>商品价格</th>
							<th>操作</th>
						</thead>
						<tbody>
							<tr v-for="(item,index) in product">
								<td>
									<input
										type="checkbox" 
										@click="checkStatus(item)"
										v-model="item.status" 
										:value="item.name">
								</td>
								<td>{{index+1}}</td>
								<td>{{item.brand}}</td>
								<td>{{item.name}}</td>
								<td>{{item.price}}</td>

								<td>
									<button class='btn btn-xs btn-default' @click="item.count--" :disabled="item.count==1">-</button>
									<input type="text" min="1" step="1" v-model="item.count" />
									<button class='btn btn-xs btn-default' @click="item.count++">+</button>
								</td>
								<td>{{item.price*item.count}}</td>
								<td>
									<button class="btn btn-danger btn-xs" @click="deleteProduct(index)">删除</button>
								</td>
							</tr>
						</tbody>
					</table>
					<div>您的购物总价为：{{totalprice}}</div>
				</div>
			</div>
			<!-- 当购物车里面的东西清空的时候 product.length=0-->
			<div v-show="product.length==0">
				<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-12">
					您的购物车空空如也,请返回首页
				</div>
			</div>
		</div>

	</body>
	<script type="text/javascript">
		var demo = new Vue({
			el: '#demo',
			data: {
				product: [{
						id: 1,
						brand: '三星',
						name: 'Galaxy X8',
						price: 4500,
						count: 1,
						status:false
					},
					{
						id: 2,
						brand: 'Apple',
						name: 'iphone X',
						price: 6700,
						count: 1,
						status:false
					},
					{
						id: 3,
						brand: '红富士',
						name: '苹果',
						price: 3,
						count: 10,
						status:false
					},
					{
						id: 4,
						brand: '罗技',
						name: '鼠标',
						price: 1200,
						count: 1,
						status:false
					},
					{
						id: 5,
						brand: '今麦郎',
						name: '矿泉水',
						price: 1,
						count: 3,
						status:false
					}
				],
				allStatus:false
			},
			methods: {
				/* 删除商品 */
				deleteProduct: function(index) {
					if(confirm('您确定删除该商品吗？')){
						this.product.splice(index, 1)
					}	
				},
				/*全选与全不选*/
				changeAllStatus(){
					var _this = this;
					if(!_this.allStatus){
						/*全选*/
						for(var i=0;i<_this.product.length;i++){
							_this.product[i].status = true;
						}
					}else{
						/*全不选*/
						for(var i=0;i<_this.product.length;i++){
							_this.product[i].status = false;
						}
					}
				},
				/*跟踪定位单个选项*/
				checkStatus(item){
					/*1、当前按钮状态*/
					if(!item.status){
						item.status = true;
					}else{
						item.status = false;
					}
					/* 2、every全真即真、some有真即真 */
					var _this = this;
					var result = _this.product.every(function(item,index,self){
						return item.status;
					})
					if(!result){
						_this.allStatus = false;
					}else{
					_this.allStatus = true;
					}					
				},
				/*批量删除*/
				deletaAll(){
					var _this = this;
					_this.product = _this.product.filter(function(item,index,self){
						return item.status == false;
					})
					if(_this.allStatus){
						_this.allStatus = false;
					}
				}
			},
			
			computed: {
				totalprice: function() {
					var sum = 0;
					for (var i = 0; i < this.product.length; i++) {
						sum += this.product[i].price * this.product[i].count
					}
					return sum;
				}
			}
		})
	</script>
</html>