uniapp v-for
时间: 2023-10-17 12:34:18 浏览: 37
uniapp 中的 v-for 是用来循环渲染数据的指令。它可以用于在模板中循环渲染数组或对象的属性。
在使用 v-for 时,你需要提供一个数据源和一个模板,然后将数据源绑定到模板中。例如:
```
<template>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
list: ['Apple', 'Banana', 'Orange']
}
}
}
</script>
```
在上面的代码中,我们使用 v-for 循环渲染了一个数组 `list`,并将数组的每个元素渲染为一个 `<li>` 标签。`:key="index"` 是为了提高性能,它用来标识每个循环项的唯一性。
除了数组,你也可以使用 v-for 循环渲染对象的属性。例如:
```
<template>
<ul>
<li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
obj: {
name: 'John',
age: 25,
gender: 'Male'
}
}
}
}
</script>
```
在上面的代码中,我们使用 v-for 循环渲染了一个对象 `obj` 的属性,并将属性名和属性值渲染为一个 `<li>` 标签。
希望能帮到你!如果还有其他问题,请继续提问。