用vue常用标签创建一个表格
时间: 2024-01-26 13:47:32 浏览: 116
基于vue 的标签组件
可以使用 Vue 的内置指令 `v-for` 和 `v-bind` 来创建表格,以下是一个简单的示例:
```html
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(person, index) in people" :key="index">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
```
在 Vue 实例中,我们需要定义一个 `people` 数组,该数组包含了我们要显示的数据。例如:
```javascript
new Vue({
el: "#app",
data: {
people: [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 }
]
}
});
```
这样就可以通过 `v-for` 指令来循环遍历 `people` 数组,并使用 `v-bind` 指令将每个人的属性绑定到表格中的单元格中。
阅读全文