vue3遍历数组对象

在 Vue3 中，遍历数组对象通常会涉及到 `v-for`指令，它允许你在模板中循环渲染数据。假设你有一个包含对象的数组 `items`，每个对象都有你想展示的一些属性：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', value: 'Value 1' },
        { id: 2, name: 'Item 2', value: 'Value 2' },
        // 更多项...
      ]
    };
  }
};
</script>

在这个例子中，`v-for`遍历了`items`数组，`:key`用于确保元素的唯一性，`item.name` 和 `item.value` 分别用于显示对象的 `name` 和 `value` 属性。当你在Vue实例上更新 `items` 数组，列表会自动根据新的数据进行更新。

相关问题

vue循环遍历数组对象

在 Vue 中，可以使用 `v-for` 指令来循环遍历数组或对象，示例如下：

循环遍历数组：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

其中，`items` 是一个数组，`item` 是数组中的每个元素。

循环遍历对象：

<ul>
  <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>

其中，`object` 是一个对象，`key` 是对象中的键，`value` 是对象中的值。

另外，如果要同时获取索引，可以使用以下语法：

<ul>
  <li v-for="(item, index) in items">{{ index }}. {{ item }}</li>
</ul>

其中，`index` 是元素在数组中的索引。

vue3遍历数组套数组套对象

可以使用v-for指令来遍历数组套数组套对象，例如：

<template>
  <div>
    <div v-for="(arr, index) in array" :key="index">
      <div v-for="(obj, key) in arr" :key="key">
        <p>{{ obj.name }}</p>
        <p>{{ obj.age }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        [
          { name: '张三', age: 18 },
          { name: '李四', age: 20 }
        ],
        [
          { name: '王五', age: 22 },
          { name: '赵六', age: 24 }
        ]
      ]
    }
  }
}
</script>