uniapp数组的循环遍历
时间: 2023-07-29 10:07:36 浏览: 161
for循环遍历数组.txt
在 uni-app 中,你可以使用 `v-for` 指令来循环遍历数组。以下是一个简单的例子:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">{{ item }}</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['apple', 'banana', 'orange', 'pear']
}
}
}
</script>
```
在这个例子中,我们使用 `v-for` 指令来循环遍历 `items` 数组,并为每个元素创建一个 `div` 元素。`item` 是当前循环的元素,`index` 是当前元素在数组中的索引。
你也可以使用对象的形式来循环遍历数组,并访问数组元素的属性。例如:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">
{{ item.name }} is {{ item.age }} years old.
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: 'Tom', age: 20 },
{ name: 'Mary', age: 30 },
{ name: 'John', age: 25 }
]
}
}
}
</script>
```
在这个例子中,我们使用 `v-for` 指令循环遍历 `items` 数组,并访问每个元素的 `name` 和 `age` 属性。
你可以根据你的需求修改代码,以实现你想要的效果。
阅读全文