-
在pages文件夹中创建ExamResult.vue文件
-
编写ExamResult.vue代码如下:
<template>
<div class="exam-result">
<h1>考试成绩单</h1>
<table>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th>语文成绩</th>
<th>数学成绩</th>
<th>英语成绩</th>
<th>总成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="result in results" :key="result.id">
<td>{{result.name}}</td>
<td>{{result.id}}</td>
<td>{{result.chinese}}</td>
<td>{{result.math}}</td>
<td>{{result.english}}</td>
<td>{{result.total}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
results: [
{ id: 001, name: '小明', chinese: 90, math: 80, english: 85, total: 255 },
{ id: 002, name: '小红', chinese: 85, math: 90, english: 75, total: 250 },
{ id: 003, name: '小刚', chinese: 80, math: 75, english: 95, total: 250 },
{ id: 004, name: '小美', chinese: 70, math: 90, english: 85, total: 245 },
{ id: 005, name: '小强', chinese: 75, math: 85, english: 80, total: 240 }
]
}
}
}
</script>
<style>
.exam-result {
max-width: 800px;
margin: 0 auto;
padding: 30px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 16px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #eee;
}
</style>
- 运行uni-app项目,在首页添加一个跳转链接到ExamResult页面
<template>
<view class="home">
<text class="title">欢迎来到考试系统</text>
<button class="btn" @click="gotoExamResult">查看成绩单</button>
</view>
</template>
<script>
export default {
methods: {
gotoExamResult() {
uni.navigateTo({
url: '/pages/ExamResult/ExamResult'
})
}
}
}
</script>
<style>
.home {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
background-color: #0d6efd;
color: #fff;
border: none;
cursor: pointer;
}
</style>