用vue2遍历一个array中的两个字段
时间: 2024-03-21 15:40:29 浏览: 56
vue遍历对象中的数组取值示例
可以使用 `v-for` 指令遍历数组,并使用 `template` 定义循环体,然后在循环体中使用双大括号表达式(或者 `v-bind` 指令)来显示数组中的两个字段。示例代码如下:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.field1 }} - {{ item.field2 }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ field1: 'value1', field2: 'value2' },
{ field1: 'value3', field2: 'value4' },
{ field1: 'value5', field2: 'value6' }
]
}
}
}
</script>
```
在上面的代码中,`items` 是一个包含多个对象的数组,每个对象中都有两个字段 `field1` 和 `field2`。使用 `v-for` 遍历 `items` 数组,并在循环体中使用双大括号表达式显示每个对象的 `field1` 和 `field2` 字段的值。
阅读全文