Vue_简单购物车的实现

最新推荐文章于 2023-07-04 23:47:38 发布

友人C君~

最新推荐文章于 2023-07-04 23:47:38 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/CWH0908/article/details/86501031

vue 专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue_demo2</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css" />		
		<style type="text/css">
			table,th,tr,td{
				font-size: 20px;
				text-align: center;
				border: solid 1px cornflowerblue;
				border-radius: 4px;
			}
			td,th{
				height: 50px;
				width: 120px;
			}
			.button1{
				display: inline-block;
				width: 22px;
			}
		</style>
	</head>
	<body>
		
		<div id="div1">
			<table>
				<thead>
						<th v-for="th in thList">{{th}}</th>
				</thead>
				<tbody>
					<tr v-for="obj in tdList">
						<td>{{obj.id}}</td>
						<td>{{obj.name}}</td>
						<td>
							{{obj.price}}
						</td>					
						<td>
							<button class="btn btn-warning button1" v-bind:disabled="obj.count==0" v-on:click="obj.count--">-</button><!--数量为0时不能减去-->
							{{obj.count}}
							<button class="btn btn-success button1" v-on:click="obj.count++">+</button>
						</td>
						<td><button class="btn btn-danger " v-on:click="obj.count=0" width="150px">重置</button></td>
					</tr>
				</tbody>
			</table>
			<h2>总价：{{sum()}}</h2>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				
				el:"#div1",
				data:{
					thList:["序号","名称","价格","数量","重置"],
					tdList:[{
						id:1,
						name:"华为",
						price:3000,
						count:0,
					},
					{
						id:2,
						name:"iPhone",
						price:7000,
						count:0,						
					},
					{
						id:3,
						name:"三星",
						price:6000,
						count:0,						
					}],
				},
				methods:{
					sum:function(){
						var sumPrice=0;
						for(var i=0,len=this.tdList.length;i<len;i++){
							sumPrice+=this.tdList[i].price*this.tdList[i].count;
						}
						return sumPrice;
					}
				}
				
			});
		</script>
	</body>
</html>