vue用组件构建一个成绩表格
时间: 2024-05-08 15:18:26 浏览: 21
好的,下面是示例代码:
```
<template>
<div>
<table>
<thead>
<tr>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="(score, index) in scores" :key="index">
<td>{{ score.subject }}</td>
<td>{{ score.value }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: {
scores: {
type: Array,
required: true,
default: () => [
{ subject: '语文', value: 90 },
{ subject: '数学', value: 85 },
{ subject: '英语', value: 92 }
]
}
}
}
</script>
```
这个组件接受一个成绩数组作为 props,然后使用 v-for 指令来遍历数组,渲染成绩表格。每一行显示科目和对应的成绩。你可以根据实际需要修改 props 类型和默认值。