findTravelGuideList().then(res => { this.tableData = res.data.datas.ulist.map(de => { let tempList = de.imgLink.split(','); // 将图片分隔开来,分别存储在临时变量中 console.log(tempList); return de; }) this.total = res.data.datas.pageInfo.total; })怎么将请求的多少数组数据遍历到页面上vue
时间: 2024-02-14 11:05:47 浏览: 113
Matlab串口函数.pdf
你可以使用 `v-for` 指令在 Vue 模板中遍历 `tableData` 数组,然后使用插值语法 `{{}}` 将每个数组元素的属性值显示出来。例如:
```html
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
```
这里使用了 `v-for` 指令来遍历 `tableData` 数组,并使用 `:key` 绑定 `item.id` 作为每个元素的唯一标识。在每个 `<td>` 元素中,使用插值语法 `{{}}` 显示每个数组元素的属性值。
阅读全文