遍历数组
以下是使用 v-for 遍历数组的基本语法：
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
在这个例子中，items 是一个包含对象的数组，v-for 遍历数组中的每个对象，将 item.text 渲染为列表项的文本。
你也可以使用索引：
<ul>
<li v-for="(item, index) in items">{{ index + 1 }}. {{ item.text }}</li>
</ul>
在这个例子中，index 表示当前元素的索引。
遍历对象的属性
除了数组，v-for 也可以遍历对象的属性：
<ul>
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
在这个例子中，object 是一个包含键值对的对象，v-for 遍历对象的每个属性，将键和值渲染为列表项的文本。
在遍历中使用 v-bind:key
在 v-for 中，你通常需要为每个项指定一个唯一的 key，以便 Vue.js 能够更高效地更新 DOM。
<ul>
<li v-for="item in items" v-bind:key="item.id">{{ item.text }}</li>
</ul>
在这个例子中，假设 items 数组中的每个对象都有一个唯一的 id 属性，我们使用 v-bind:key 将 item.id 设置为每个列表项的 key。
遍历数字范围
你也可以使用 v-for 遍历数字范围：
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
在这个例子中，v-for 会渲染出包含数字 1 到 10 的列表项。
总之，v-for 是在 Vue.js 中进行列表渲染的主要工具，可以用于遍历数组、对象或数字范围，以便动态生成相应数量的元素。
转载请注明出处：http://www.zyzy.cn/article/detail/4801/Vue