Vue中v-for的9种使用案例总结大全
作者：不会敲代码的健身教练
v-for是vue的循环指令,作用是遍历数组(对象)的每一个值,这篇文章主要给大家介绍了关于Vue中v-for的9种使用案例的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
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: ['第一项', '第二项', '第三项']
}
}
}
</script>2. 循环渲染对象
以下代码的意思是：循环渲染一个包含三个属性的对象，每个属性的键值对分别为“name: 张三”、“age: 18”和“gender: 男”。
<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: '张三',
age: 18,
gender: '男'
}
}
}
}
</script>3. 循环渲染数字
以下代码的意思是：循环渲染数字1到5，每个数字作为列表项的内容。
<template>
<div>
<ul>
<li v-for="n in 5" :key="n">{{ n }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>4. 循环渲染带有索引的数组
以下代码的意思是：循环渲染一个包含三个元素的列表，每个元素的值分别为“第一项”、“第二项”和“第三项”，并在每个列表项前面显示该项的索引。
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{ index }}: {{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ['第一项', '第二项', '第三项']
}
}
}
</script>5. 循环渲染嵌套数组
以下代码的意思是：循环渲染一个包含两个元素的列表，每个元素包含一个标题和一个子列表，子列表中包含两个子项。
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item.title }}
<ul>
<li v-for="(subItem, subIndex) in item.subList" :key="subIndex">{{ subItem }}</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
title: '第一项',
subList: ['子项1', '子项2']
},
{
title: '第二项',
subList: ['子项3', '子项4']
}
]
}
}
}
</script>6. 循环渲染对象数组
以下代码的意思是：循环渲染一个包含三个元素的对象数组，每个元素包含一个name和age属性。
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item.name }} - {{ item.age }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
}
}
</script>7. 循环渲染多维数组
以下代码的意思是：循环渲染一个包含两个元素的多维数组，每个元素是一个包含两个元素的数组。
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
['第一项', '第二项'],
['第三项', '第四项']
]
}
}
}
</script>8. 循环渲染对象的属性数组
以下代码的意思是：循环渲染一个对象的属性数组，每个元素是对象的一个属性值
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
name: '张三',
age: 18,
gender: '男'
}
}
},
computed: {
list() {
return Object.values(this.obj)
}
}
}
</script>9. 循环渲染组件
以下代码的意思是：循环渲染一个包含三个元素的对象数组，
<template>
<div>
<my-component v-for="(item, index) in list" :key="index" :item="item"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
},
data() {
return {
list: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
]
}
}
}
</script>总结
到此这篇关于Vue中v-for的9种使用案例的文章就介绍到这了,更多相关Vue v-for使用案例内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！