vue表格中循环不同数据
时间: 2023-04-03 11:01:57 浏览: 71
可以使用 v-for 指令来循环不同的数据,例如:
<template>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in dataList" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
dataList: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
],
};
},
};
</script>
相关问题
vue 往表格中添加数据完整demo
好的,以下是一个用 Vue.js 往表格中添加数据的完整示例:
HTML 代码:
```
<div id="app">
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.email }}</td>
</tr>
</tbody>
</table>
<form v-on:submit.prevent="addPerson">
<label>Name:</label>
<input type="text" v-model="newPerson.name">
<label>Email:</label>
<input type="email" v-model="newPerson.email">
<button type="submit">Add Person</button>
</form>
</div>
```
Vue.js 代码:
```
new Vue({
el: '#app',
data: {
people: [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' },
{ name: 'Charlie', email: 'charlie@example.com' }
],
newPerson: { name: '', email: '' }
},
methods: {
addPerson: function () {
this.people.push({
name: this.newPerson.name,
email: this.newPerson.email
});
this.newPerson.name = '';
this.newPerson.email = '';
}
}
});
```
这个示例中,我们使用了 Vue.js 的 `v-for` 指令来循环遍历 `people` 数组,并将每个人的名字和电子邮件地址显示在表格中。我们还创建了一个表单,让用户输入新的人员信息。当用户提交表单时,我们使用 `v-on:submit.prevent` 指令来阻止表单默认的提交行为,并调用 `addPerson` 方法。这个方法会在 `people` 数组中添加新的人员信息,并清空表单中的输入框。
vue 表格绑定数据源
在 Vue 中绑定表格数据源可以通过以下步骤实现:
1. 在 Vue 实例中定义表格数据源,比如:
```
data() {
return {
tableData: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
]
}
}
```
2. 在表格组件中使用 `v-for` 指令循环渲染表格行,如下所示:
```
<template>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</template>
```
3. 在表格组件中使用 `v-bind` 指令绑定表格数据源,如下所示:
```
<template>
<table :data="tableData">
<!-- 表格内容 -->
</table>
</template>
```
以上就是在 Vue 中绑定表格数据源的方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)