v-for可以用于循环渲染数组、对象和数字等数据类型，常见的使用场景包括：
1. 循环渲染数组

以下代码的意思是：循环渲染一个包含三个元素的列表，每个元素的值分别为“第一项”、“第二项”和“第三项”。

  • {{ item }}
export default {data() {return {list: ['第一项', '第二项', '第三项']}}}

2. 循环渲染对象

以下代码的意思是：循环渲染一个包含三个属性的对象，每个属性的键值对分别为“name: 张三”、“age: 18”和“gender: 男”。

  • {{ key }}: {{ value }}
export default {data() {return {obj: {name: '张三',age: 18,gender: '男'}}}}

3. 循环渲染数字

以下代码的意思是：循环渲染数字1到5，每个数字作为列表项的内容。

  • {{ n }}
export default {data() {return {}}}

4. 循环渲染带有索引的数组

以下代码的意思是：循环渲染一个包含三个元素的列表，每个元素的值分别为“第一项”、“第二项”和“第三项”，并在每个列表项前面显示该项的索引。

  • {{ index }}: {{ item }}
export default {data() {return {list: ['第一项', '第二项', '第三项']}}}

5. 循环渲染嵌套数组

以下代码的意思是：循环渲染一个包含两个元素的列表，每个元素包含一个标题和一个子列表，子列表中包含两个子项。

  • {{ item.title }}
    • {{ subItem }}
export default {data() {return {list: [{title: '第一项',subList: ['子项1', '子项2']},{title: '第二项',subList: ['子项3', '子项4']}]}}}

6. 循环渲染对象数组

以下代码的意思是：循环渲染一个包含三个元素的对象数组，每个元素包含一个name和age属性。

  • {{ item.name }} - {{ item.age }}
export default {data() {return {list: [{ name: '张三', age: 18 },{ name: '李四', age: 20 },{ name: '王五', age: 22 }]}}}

7. 循环渲染多维数组

以下代码的意思是：循环渲染一个包含两个元素的多维数组，每个元素是一个包含两个元素的数组。

  • {{ item }}
export default {data() {return {list: [['第一项', '第二项'],['第三项', '第四项']]}}}

8. 循环渲染对象的属性数组

以下代码的意思是：循环渲染一个对象的属性数组，每个元素是对象的一个属性值

  • {{ item }}
export default {data() {return {obj: {name: '张三',age: 18,gender: '男'}}},computed: {list() {return Object.values(this.obj)}}}

9. 循环渲染组件

以下代码的意思是：循环渲染一个包含三个元素的对象数组，

import MyComponent from './MyComponent.vue'export default {components: {MyComponent},data() {return {list: [{ name: '张三', age: 18 },{ name: '李四', age: 20 },{ name: '王五', age: 22 }]}}}