上述代码使用v-for指令实现学生信息在页面上的表格显示,表格样式自定义。
时间: 2024-02-22 13:56:34 浏览: 17
好的,以下是一个示例代码,使用 v-for 指令实现学生信息在页面上的表格显示,并自定义表格样式。
HTML 代码:
```
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="student in students" :key="student.id">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
<td>{{ student.gender }}</td>
</tr>
</tbody>
</table>
```
Vue.js 代码:
```
<script>
export default {
data() {
return {
students: [
{ id: 1, name: '张三', age: 18, gender: '男' },
{ id: 2, name: '李四', age: 20, gender: '女' },
{ id: 3, name: '王五', age: 19, gender: '男' },
],
};
},
};
</script>
<style scoped>
.table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: 400;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
```
在这个示例中,我们使用 v-for 指令循环遍历学生信息数组,并在表格中显示每个学生的信息。表格样式使用 CSS 定义,可以根据需要进行自定义。