购物车计算器

最新推荐文章于 2024-08-02 13:35:44 发布

前端web打工人

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量97

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/zhaiyuyu/article/details/121051196

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引用vue.js -->
		<script type="text/javascript" src="vue.js"></script>
		<style type="text/css">
			table{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="10">
				<tr>
					<th>id</th>
					<th>书籍名称</th>
					<th>出版日期</th>
					<th>购买价格</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in list" :key="item">
					<td>{{item.id}}</td>
					<td>{{item.shu}}</td>
					<td>{{item.chu}}</td>
					<td>${{item.gay}}</td>
					<td>
						<button type="button" @click="item.nub>0?item.nub--:0">-</button>
						{{item.nub}}
						<button type="button" @click="item.nub++">+</button>
					</td>
					<td><button type="button" @click="deletes(item)">移除</button></td>
				</tr>
			</table>
			<span>总价格：{{num}}</span>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				list:[
					{"id":1,"shu":"《百年孤独》","chu":"1967-6","gay":100.00,"nub":1},
					{"id":2,"shu":"《悲惨世界》","chu":"1862-1","gay":16700.00,"nub":1},
					{"id":3,"shu":"《围城》","chu":"1991-2","gay":600.00,"nub":1},
					{"id":4,"shu":"《挪威的森林》","chu":"1987-1","gay":3455.00,"nub":1},
					{"id":5,"shu":"《活着》","chu":"1993-1","gay":7983.00,"nub":1},
				],
			},
		
			computed:{
				"num"(){
					var num=0;
					//遍历数据
					this.list.forEach(function(item,index){
						//提取出来相加
						num+=item.gay*item.nub;
					})
					return num;
				}
			},
			
			methods:{
				deletes(item){
					var ind=this.list.findIndex(value=>value.shu===item.shu);
					this.list.splice(ind,1);
				}
			}
			
		})
	</script>
</html>

前端web打工人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <script type="text/javascript" src="vue.js"></script> <style type="text/css"> table{ text-.
复制链接

扫一扫