列表渲染 v-for

阿垚啊2024-07-05 11:26

列表渲染v-for

使用v-for指令基于数组渲染一个列表，v-for指令的值需要使用item in/of items形式的特殊语法，其中items是源数据的数组，而item是迭代的别名。

代码实例：

bash 复制代码

<template>
<div><p v-for="item in name" >{{item}}</p></div>
</template>
<script>

export default{
    data(){
        return{
        name:["张三","李四","王五"]
        }
    }
}

</script>
<style scoped>

</style>

运行结果：

复杂数据

大多数情况，我们渲染的都是来源于网络请求，也就是json格式。

bash 复制代码

<template>
<div v-for="item in result" >
    <h3>姓名：{{item.name}}</h3>
    <p>年龄：{{item.age}}</p>
</div>
</template>
<script>

export default{
    data(){
        return{
       result:[{
          name:"张三",
         age:18
   },
       {
         name:"李四",
         age:19
       }]
        }
    }
}

</script>

运行结果：

v-for也支持使用第二关参数表示当前项的位置索引

bash 复制代码

<template>
<div><p v-for="(item,index) in name " :key="item" >{{item}}---{{ index }}</p></div>
</template>
<script>

export default{
    data(){
        return{
        name:["张三","李四","王五"]
        }
    }
}

</script>

运行结果：

v-for 与对象

可以使用v-for遍历一个对象的所有属性

bash 复制代码

<template>
<div><p v-for="(item,key,index) in user " :key="item" >{{item}}---{{ key }}---{{ index }}</p></div>
</template>
<script>

export default{
    data(){
        return{
       // name:["张三","李四","王五"],
        user:{
            name:"张三",
            age:18
        }
        }
    }
}

</script>

运行结果：