Vue v-for详细使用

在Vue中，v-for 指令用于基于数据重复渲染一个块。这个指令要绑定到元素上，并使用特定语法绑定要被循环的数组。

基本用法：

<div id="app">
  <ul>
    <li v-for="item in items">
      {{ item.text }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' },
    ]
  }
})
</script>

使用索引：

<div v-for="(item, index) in items">
  {{ index }}: {{ item.text }}
</div>

使用 v-for 渲染对象属性：

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

使用 v-for 和 v-if 组合：

<div v-for="user in users" v-if="user.isActive">
  {{ user.name }}
</div>

请注意，当使用 v-for 时，建议提供一个唯一的 key 属性，这样Vue可以高效地追踪每个节点的身份，从而可以重用和重新排序现有元素。

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

以上代码展示了如何在Vue中使用 v-for 指令，包括基本循环、使用索引、遍历对象属性以及结合 v-if 条件渲染。