使用v-for指令渲染到表格
时间: 2023-10-17 21:17:39 浏览: 40
你可以使用 `v-for` 指令来循环渲染数据到表格中。以下是一个简单的示例:
HTML 代码:
```html
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
```
JavaScript 代码:
```js
export default {
data() {
return {
users: [
{ id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
{ id: 2, name: 'Jane Doe', email: 'jane@example.com', age: 25 },
{ id: 3, name: 'Bob Smith', email: 'bob@example.com', age: 40 },
{ id: 4, name: 'Alice Johnson', email: 'alice@example.com', age: 35 }
]
};
}
}
```
在上面的示例中,我们使用 `v-for` 指令循环遍历 `users` 数组,并将每个用户的信息渲染到表格中的一行中。我们还使用 `:key` 绑定每个用户的唯一 ID,以便 Vue 可以更好地追踪和更新每行数据。