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

                                   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>