vue 循环遍历Json数据填充Table表格学习例子整理记录自学前端

最新推荐文章于 2023-12-18 22:42:50 发布

托马斯小火车喷雾又喷烟，一直喷，喷喷喷.

最新推荐文章于 2023-12-18 22:42:50 发布

阅读量1.6w

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/InJavaWeTrust/article/details/104647087

版权

vue 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

vue 循环遍历Json数据填充Table表格学习例子整理记录自学前端

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="app">
		<table>
			<thead>
				 <tr>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>总价</th>
				 </tr>
			 </thead>
			 <tbody>
				 <tr v-for="cm in package1">
					 <td v-text="cm.name"></td>
					 <td v-text="cm.price"></td>
					 <td v-text="cm.count"></td>
					 <td v-text="cm.price * cm.count"></td>
				 </tr>
				 <tr v-for="cm in package2">
					 <td v-text="cm.name"></td>
					 <td v-text="cm.price"></td>
					 <td v-text="cm.count"></td>
					 <td v-text="cm.price * cm.count"></td>
				 </tr>
			 </tbody>
		</table>
		总价：{{ prices }}
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				package1:[
					{
						name:'iphonex',
						price:2000,
						count:2
					},
					{
						name:'ipad',
						price:1800,
						count:1
					}
				],
				package2:[
					{
						name:'apple',
						price:3,
						count:5
					},
					{
						name:'banana',
						price:5,
						count:10
					}
				]
			},
			computed:{
				prices:function(){
					var prices = 0;
					for (var i = 0; i < this.package1.length; i++) {
						prices += this.package1[i].price * this.package1[i].count;
					}
					for (var i = 0; i < this.package2.length; i++) {
						prices += this.package2[i].price * this.package2[i].count;
					}
					return prices;
				}
			}
		})
	</script>
</body>
</html>

托马斯小火车喷雾又喷烟，一直喷，喷喷喷.

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
vue 循环遍历Json数据填充Table表格学习例子整理记录自学前端

vue循环遍历Json数据填充Table表格学习例子整理记录自学前端<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body> <div id="app"> <table> ...
复制链接

扫一扫