定义一个数组对象,里面有多个学生的学号,姓名 和年龄。在表格中显示每个学生的学号,姓名和年 龄用vue写
时间: 2024-09-25 15:08:09 浏览: 39
在Vue.js中,你可以使用`v-for`指令来遍历数组,并结合模板语法创建动态表格。这里是一个简单的例子,假设有一个名为`students`的数据数组,它包含学生的信息:
```html
<template>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.age }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
students: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
// 更多学生数据...
],
};
},
};
</script>
```
在这个例子中,`v-for`遍历`students`数组,每次迭代会渲染一个新的表格行,其中`{{ student.id }}`, `{{ student.name }}`, 和 `{{ student.age }}` 会分别展示对应的学生学号、姓名和年龄。
阅读全文