vue3 v-for循环

在Vue3中，v-for循环有以下几种用法：

1. 通过数组循环：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange"],
    };
  },
};
</script>

2. 通过对象循环：

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

<script>
export default {
  data() {
    return {
      obj: { name: "Tom", age: 18, gender: "male" },
    };
  },
};
</script>

3. 通过数字循环：

<template>
  <div>
    <ul>
      <li v-for="n in 5" :key="n">{{ n }}</li>
    </ul>
  </div>
</template>

4. 通过模板循环：

<template>
  <div>
    <ul>
      <template v-for="(item, index) in list">
        <li :key="index">{{ item }}</li>
        <hr v-if="index < list.length - 1" />
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange"],
    };
  },
};
</script>

在Vue3中，v-for还支持了一些新的特性，例如：在使用v-for循环对象时，可以使用`v-for="(value, key, index) in obj"`来获取键名、键值和索引。同时，还支持了`v-for`的`key`属性可以接收一个函数，这个函数可以返回一个唯一标识符来代替默认的`key`。