vue笔记

原创已于 2022-10-21 09:18:01 修改 · 1.7w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2017-05-05 15:11:39 首次发布

贤弟专栏收录该内容

249 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的动态表格案例，该案例展示了如何通过v-for指令遍历数据并利用计算属性计算总价。示例中包含了两个商品包，每个包内有不同类型的商品及其价格和数量。

vue笔记

There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence.

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