_37

导航

0921v-for

<html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head>
<body>
	<div id="app">
		<!-- 从一开始,循环到10 -->
		<ul v-for="count in 10">
			<li>{{count}}</li>
		</ul>
		
		<!-- 生成列表 -->
		<ul v-for="(student,index) in students">
			<li>{{index+1}}:姓名{{student.name}},年龄是{{student.age}},所在班级是{{student.class}}。</li>
		</ul>
		
		<!-- 生成表格 -->
		<table border="1" style="border-collapse:collapse; text-align:center; padding:3px" >
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
					<th>数学成绩</th>
					<th>语文成绩</th>
					<th>总成绩</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(student,index) in students">
					<td>{{index+1}}</td>
					<td>{{student.name}}</td>
					<td>{{student.age}}</td>
					<td>{{student.class}}</td>
					<td>{{student.scores.math}}分</td>
					<td>{{student.scores.chinese}}分</td>
					<td>{{total(index)}}分</td>
				</tr>
			</tbody>
			
		</table>
	</div>
</body>

<script type="text/javascript">
// el:元素挂载,将Vue实例与HTML元素进行绑定
	var vm = new Vue({
		el:"#app",
		data:{
			showPic:false,
			showtext:"显示",
			students:[
				{
					name:"张三",
					age:19,
					class:"软工1班",
					scores:{
						math:50,
						chinese:60
					}
				},
				{
					name:"李四",
					age:20,
					class:"软工2班",
					scores:{
						math:50,
						chinese:70
					}
				},
				{
					name:"王五",
					age:21,
					class:"软工1班",
					scores:{
						math:50,
						chinese:80
					}
				},
				{
					name:"赵柳",
					age:22,
					class:"软工2班",
					scores:{
						math:50,
						chinese:90
					}
				}
			]
		},
		methods:{
			total:function(index){
				// var stu = this.students[index];
				// return stu.math+stu.chinese;
				var totalScore = 0;
				var scores = this.students[index].scores;
				for(var i in scores){
					totalScore+=scores[i]
				}
				return totalScore;
			}
		}
	})
</script>

posted on 2022-09-21 20:38  _37  阅读(20)  评论(0编辑  收藏  举报