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

小咪咪 2023-07-11 05:41 0阅读 0赞

[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>

[vue_Json_Table]: https://blog.csdn.net/InJavaWeTrust/article/details/104647087