Vue 购物车案例

最新推荐文章于 2023-11-01 15:15:53 发布

北海之灵

最新推荐文章于 2023-11-01 15:15:53 发布

阅读量469

点赞数 3

分类专栏： Vue 文章标签：购物车

本文链接：https://blog.csdn.net/xukongjing1/article/details/85555613

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

效果如下：

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>购物车示例</title>
	<style type="text/css">
		table{
			border:1px solid #e9e9e9;
			border-collapse: collapse;
			border-spacing: 0;
			empty-cells: show;
		}
		th,td{
			padding:8px 16px;
			border:1px solid #e9e9e9;
			text-align:left;
		}
		th{
			background:#f7f7f7;
			color:#5c6b77;
			font-weight:600;
			white-space: nowrap;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<template v-if="list.length">
			<table>
				<thead>
					<tr>
						<th><input type="checkbox" :checked="allCheck" @click="allClick"/></th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) of list" :key="item.key">
						<td >
							<input type="checkbox" :checked="item.checked" @click="item.checked=!item.checked"/></td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td>
							<button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
							{{item.count}}
							<button @click="handleAdd(index)">+</button>
						</td>
						<td>
							<button @click="handleRemove(index)">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<div>总价：￥{{totalPrice}}</div>
		</template>
		<div v-else>购物车为空</div>
	</div>
<script src="../lib/vue.js"></script>
<script>
 var app = new Vue({
	 el:'#app',
	 data:{
		list:[
			{id:'1_1',name:'iPhone 7',price:6188,count:1,checked:true},
			{id:'1_2',name:'iPad Pro',price:5888,count:1,checked:true},
			{id:'1_3',name:'MackBook Pro',price:21488,count:1,checked:false}
		]
	 },
	 methods:{
		allClick(){
			var checked;
			if(this.allCheck){
				checked = false;
			} else {
				checked = true;
			}
			this.list.forEach((item,index)=>{
				item.checked = checked;
			})
		},
		handleReduce(index){
			if(this.list[index].count === 1) return;
			this.list[index].count--;
		},
		handleAdd(index){
			this.list[index].count++;
		},
		handleRemove(index){
			this.list.splice(index,1);
		}
	 },
	 computed:{
		allCheck(){
			let count = 0;
			this.list.forEach((item,index)=>{
				count += (item.checked?1:0);
			})
			return count == this.list.length;
		},
		totalPrice(){
			var total = 0;
			this.list.forEach((item,index)=>{
				if(item.checked){
					total += item.price*item.count;
				}
			})
			return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
		}
	 }
 })
</script>
</body>
</html>