遍历数组：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>
在上述示例中，通过 v-for 遍历数组 items，并渲染每个数组项。使用 :key 来提供唯一的键，以帮助 Vue 进行高效的更新。
遍历对象：
<template>
<div>
<ul>
<li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: 'John',
age: 30,
occupation: 'Developer'
}
};
}
};
</script>
在上述示例中，通过 v-for 遍历对象 user 的键值对，并渲染每个键值对。
遍历整数范围：
<template>
<div>
<ul>
<li v-for="n in 5" :key="n">{{ n }}</li>
</ul>
</div>
</template>
你也可以使用 v-for 遍历一个整数范围，上述示例会渲染从 1 到 5 的整数。
遍历数组的同时获取索引：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Apple', 'Banana', 'Cherry']
};
}
};
</script>
在这个示例中，通过 v-for 遍历数组 items 并获取索引 index，渲染每个数组项以及对应的索引。
以上是 Vue 3.0 中基本的列表渲染用法。v-for 是一个非常强大的指令，可以帮助你在模板中动态生成内容，根据数组或对象的数据结构渲染不同的元素。
转载请注明出处：http://www.zyzy.cn/article/detail/487/Vue 3.0