Vue.js 使用 v-for 和 map 渲染数组：示例及应用

<template>
  <div>
    <ul>
      <li v-for='(item, index) in items' :key='index'>
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { name: 'Alice', age: 21 },
        { name: 'Bob', age: 25 },
        { name: 'Charlie', age: 30 }
      ]
    }
  },
  mounted() {
    // 使用 map 方法添加一个属性到每个对象中
    this.items = this.items.map(item => ({
      ...item,
      isActive: false
    }))
  }
}
</script>
<p>在上面的示例中，我们使用 <code>v-for</code> 指令渲染了 <code>items</code> 数组中的每个元素，同时使用 <code>map</code> 方法在每个对象中添加了一个名为 <code>isActive</code> 的属性。在 <code>mounted</code> 钩子函数中，我们使用 <code>map</code> 方法更新了 <code>items</code> 数组。</p>