vue foreach

// 使用 Vue.js 中的 v-for 指令来遍历数组或对象

// 示例 1: 遍历数组
new Vue({
  el: '#app',
  data: {
    items: ['苹果', '香蕉', '橙子']
  }
});

<!-- HTML -->
<div id="app">
  <ul>
    <!-- v-for 指令用于遍历数组中的每个元素 -->
    <li v-for="(item, index) in items" :key="index">{{ index }} - {{ item }}</li>
  </ul>
</div>

// 解释:
// v-for 指令可以接受一个数组，并为每个元素生成一个列表项。
// (item, index) 表示当前元素和索引，:key 是为了给每个列表项提供一个唯一的标识。

// 示例 2: 遍历对象
new Vue({
  el: '#app',
  data: {
    person: {
      name: '张三',
      age: 25,
      city: '北京'
    }
  }
});

<!-- HTML -->
<div id="app">
  <ul>
    <!-- v-for 指令也可以用于遍历对象的属性 -->
    <li v-for="(value, key) in person" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</div>

// 解释:
// 当使用 v-for 遍历对象时，(value, key) 表示当前属性的值和键名。
// :key 同样是为了给每个列表项提供一个唯一的标识。