Vue 循环语句

在 Vue.js 中，你可以使用 v-for 指令来对数组或对象进行遍历，动态生成 HTML 元素。v-for 指令允许你根据数据源的内容重复渲染一个元素或者模板块。

遍历数组

使用 v-for 遍历数组，可以将数组的每个元素渲染为一个 HTML 元素。

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

在上述示例中：

v-for="item in items" 表示遍历 items 数组，每次迭代将 item 绑定到当前遍历的数组元素。
:key="item.id" 是必须的，用于 Vue 识别每个节点的唯一性，这样 Vue 可以有效地重新使用和重新排序已渲染的元素。

遍历对象的属性

除了数组，你也可以使用 v-for 遍历对象的属性。
<div id="app">
  <ul>
    <li v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      user: {
        name: 'John Doe',
        age: 30,
        email: 'john.doe@example.com'
      }
    }
  });
</script>

在上述示例中：

v-for="(value, key) in user" 表示遍历 user 对象的每个属性，key 是属性名，value 是属性值。

遍历整数范围

你还可以使用 v-for 遍历整数范围。

<div>
  <span v-for="n in 10" :key="n">
    {{ n }}
  </span>
</div>

上述示例将会生成从 1 到 10 的 <span> 元素。

遍历嵌套数据

如果你有嵌套的数据结构，可以使用嵌套的 v-for 来进行多层级的遍历。

<div id="app">
  <ul v-for="category in categories" :key="category.id">
    <li>{{ category.name }}</li>
    <ul>
      <li v-for="product in category.products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      categories: [
        { id: 1, name: 'Category A', products: [
          { id: 1, name: 'Product A1' },
          { id: 2, name: 'Product A2' }
        ] },
        { id: 2, name: 'Category B', products: [
          { id: 3, name: 'Product B1' },
          { id: 4, name: 'Product B2' }
        ] }
      ]
    }
  });
</script>

在上述示例中：

v-for="category in categories" 遍历 categories 数组中的每个对象。
v-for="product in category.products" 遍历 category 对象中的 products 数组。

注意事项

在使用 v-for 渲染元素时，要确保提供唯一的 key 属性，以便 Vue 可以高效地更新 DOM。
遍历对象时，默认情况下是无序的，如果需要有序遍历对象的属性，可以使用 Object.keys() 方法。

以上是在 Vue.js 中使用 v-for 指令进行循环遍历的基本示例和注意事项。