vue.js--成绩单
易博文
成绩单
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输出成绩表</title>
<style>
body{text-align:center;
font-family:微软雅黑}
label{
margin-left:20px;}
.report{width:560px;
margin:30px auto;}
.title{
background: #f6f6f6;
font-size:18px;
}
.title,.content{
width:560px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title div{
width:80px;
text-align:center;
float:left}
.content{
clear:both}
.content div{
width:80px;
text-align:center;
float:left}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
<h2>成绩表</h2>
<label>姓名：</label><span>{{name}}</span>
<label>性别：</label><span>{{sex}}</span>
<label>年龄：</label><span>{{age}}</span>
<div class="report">
<div class="title">
<div>学期</div>
<div>数学</div>
<div>物理</div>
<div>化学</div>
<div>英语</div>
<div>计算机</div>
<div>总分</div>
</div>
<div class="content" v-for="(grade,index) in grades">
<div>{{grade.term}}</div>
<div v-for="score in grade.scores">
<div>{{score}}</div>
</div>
<div>{{total(index)}}</div>
</div>
</div>
</div>
<script type="text/javascript">
var exam = new Vue({
el:'#example',
data:{
name : '米斯特',//姓名
sex : '男',//性别
age : 20,//年龄
grades : [{//学期和考试成绩
term : '第一学期',
scores : {
math : 90,
physics : 85,
chemistry : 95,
english : 86,
computer : 96
}
},{
term : '第二学期',
scores : {
math : 92,
physics : 83,
chemistry : 90,
english : 88,
computer : 95
}
}]
},
methods : {
total : function(index){
var total = 0;//定义总分
var obj = this.grades[index].scores;//获取分数对象
for(var i in obj){
total += obj[i];
}
return total;//返回总分
}
}
})
</script>
</body>
</html>
类似资料：