用Vue购物功能实现

Junju_

已于 2023-01-26 14:21:37 修改

阅读量168

点赞数

分类专栏： vue练习题文章标签： vue.js javascript 前端

于 2022-10-12 10:38:44 首次发布

本文链接：https://blog.csdn.net/m0_58451019/article/details/127278000

版权

vue练习题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:'#app',
					data:{
						students:[
							{sid:1,name:'Apple',price:10,amount:1,del:'删除'},
							{sid:2,name:'Orange',price:5,amount:1,del:'删除'},
							{sid:3,name:'Banana',price:20,amount:1,del:'删除'}
						]
					},
					methods:{
						del:function(index){
							this.students.splice(index,1);
						}
					},
					computed:{
						totalAge:function(){
							var sum = 0;
							for (var i = 0; i < this.students.length; i++) {
								sum += this.students[i].price*this.students[i].amount;
							}
							return sum;
						}
					}
				})
			}
			
		</script>
	</head>
	<body>
		
		<div id="app">
			<table class="table table-striped table-hover table-light">
				<tr>
					<th colspan="2">商品名称</th>
					<th>商品单价</th>
					<th>购买数量</th>
					<th>操作</th>
				</tr>
				<tr v-for="(student,i) in students">
					<td>{{student.sid}}</td>
					<td>{{student.name}}</td>
					<td>{{student.price*student.amount}}</td>
					<td><button @click="student.amount++">＋</button>{{student.amount<=0?student.amount=0:student.amount}}<button @click="student.amount--">－</button></td>
					<td @click="del()">{{student.del}}</td>
				</tr>
				<tr><td colspan="5">总价：{{totalAge}}</td></tr>
			</table>
			
		</div>
		
	</body>
</html>