vue遍历数组对象的值并拼接成字符串换行展示
时间: 2024-05-04 15:18:33 浏览: 141
vue遍历对象中的数组取值示例
可以使用`v-for`指令和`template`标签来遍历数组对象,然后在模板中拼接需要展示的字符串,并使用`<br>`标签换行展示。示例代码如下:
```html
<template>
<div>
<template v-for="(item, index) in items">
{{ item.name }} - {{ item.age }}<br>
</template>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Tom', age: 20 },
{ name: 'Jerry', age: 22 },
{ name: 'Bob', age: 18 }
]
}
}
}
</script>
```
在上面的示例中,我们使用了`v-for`指令遍历了`items`数组对象,并使用`template`标签来包裹每个展示项。在模板中,我们拼接了需要展示的字符串,并使用`<br>`标签来实现换行展示。
阅读全文