【前端笔记】十一、v-for循环普通数组、对象数组、对象、数字

最新推荐文章于 2024-07-18 18:59:22 发布

知识的芬芳和温柔的力量全都拥有的小王同学

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量9.9k

点赞数 2

分类专栏：前端文章标签： vue.js v-for

本文链接：https://blog.csdn.net/tensixchuan/article/details/120616439

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的v-for指令，包括如何循环普通数组、对象数组、对象属性，以及如何遍历数字。同时，展示了在组件中使用v-for的注意事项，强调了在2.2.0+版本中必须使用key属性及其用法。通过实例代码，阐述了v-for在不同场景下的应用。

摘要由CSDN通过智能技术生成

Vue指令之v-for

v-for可以实现循环，语法格式大概为v-for=“item in list”

in后面可以放普通数组、对象数组、对象、数字

1、循环普通数组

v-for="(item,i) in list"

示例：
数据准备，在vue实例的data中新增一个list数组

data: {
	list: [1, 2, 3, 4, 5]
}

遍历数组：

<ul>
	<li v-for="(item,i) in list">索引：{{i}}---每一项：{{item}}</li>
</ul>

结果：
在这里插入图片描述

2、循环对象数组

v-for="(item,i) in userList"

示例：
数据准备，在vue实例的data中新增一个userList对象数组

data: {
	userList: [
		{id: 1,name: "zs1",age: 21}, 
		{id: 2,name: "zs2",age: 22}, 
		{id: 3,name: "zs3",age: 23}, 
		{id: 4,name: "zs4",age: 24},
		{id: 5,name: "zs5",age: 25}
	]
}

遍历数组：

<!-- 2、循环对象数组 -->
        <ul>
            <li v-for="(item,i) in userList">索引：{{i}}---ID：{{item.id}}---姓名：{{item.name}}---年龄：{{item.age}}</li>
        </ul>

结果：
在这里插入图片描述

3、循环对象中的属性

v-for="(val,key,i) in userList[0]"

遍历：

<div v-for="(val,key,i) in userList[0]">i: {{i}}---键：{{key}}---值：{{val}}</div>

结果：
在这里插入图片描述
注意：
在遍历对象身上的键值对时，除了有 val key 键值对，在第三个位置还有一个索引

4、循环数字

v-for=“i in 10”

遍历数字：

<p v-for="i in 10">第{{i}}个p标签</p>

结果：
在这里插入图片描述
注意：
v-for迭代数字时，值从1开始

5、在组件中使用v-for

在2.2.0+的版本里，当在组件中使用v-for时：

必须使用key属性
必须使用v-bind指定key的值
key的属性只能是string或number

示例：
数据准备，在vue实例的data中新增一个userList对象数组

<div>
	<label>Id:<input type="text" v-model="id" style="width: 50px;"></label>
	<label>Name:<input type="text" v-model="name"style="width: 80px;"></label>
	<label>Age:<input type="number" v-model="age"style="width: 50px;"></label>
	<input type="button" value="添加" @click="add">
</div>
<div v-for="item in userList" v-bind:key="item.id">
	<!-- 注意：在2.2.0+的版本里，当在组件中使用v-for时，必须使用key属性，必须使用v-bind指定key的值，key的属性只能是string或number -->
	<input type="checkbox" name="" id="">&nbsp;&nbsp;&nbsp;{{item.id}}--------------{{item.name}}---------{{item.age}}
</div>

结果：
在这里插入图片描述

总览：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-for迭代数组 -->
        <!-- in后面可以放普通数组、对象数组、对象、数字 -->
        <!-- 1、循环普通数组 -->
        <ul>
            <li v-for="(item,i) in list">索引：{{i}}---每一项：{{item}}</li>
        </ul>

        <!-- 2、循环对象数组 -->
        <ul>
            <li v-for="(item,i) in userList">索引：{{i}}---ID：{{item.id}}---姓名：{{item.name}}---年龄：{{item.age}}</li>
        </ul>

        <!-- 3、迭代对象中的属性 -->
        <!-- 注意：在遍历对象身上的键值对时，除了有 val key 键值对，在第三个位置还有一个索引 -->
        <div v-for="(val,key,i) in userList[0]">i: {{i}}---键：{{key}}---值：{{val}}</div>

        <!-- 4、迭代数字 -->
        <!-- v-for迭代数字时，值从1开始 -->
        <p v-for="i in 10">第{{i}}个p标签</p>


        <div>
            <label>Id:<input type="text" v-model="id" style="width: 50px;"></label>
            <label>Name:<input type="text" v-model="name"style="width: 80px;"></label>
            <label>Age:<input type="number" v-model="age"style="width: 50px;"></label>
            <input type="button" value="添加" @click="add">
        </div>
        <div v-for="item in userList" v-bind:key="item.id">
            <!-- 注意：在2.2.0+的版本里，当在组件中使用v-for时，必须使用key属性，必须使用v-bind指定key的值，key的属性只能是string或number -->
            <input type="checkbox" name="" id=""> &nbsp;&nbsp;&nbsp;{{item.id}}--------------{{item.name}}---------{{item.age}}
        </div>



    </div>

    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: "#app",
            data: {
                list: [1, 2, 3, 4, 5],
                id: "",
                name: "",
                age: 0,
                userList: [{
                    id: 1,
                    name: "zs1",
                    age: 21
                }, {
                    id: 2,
                    name: "zs2",
                    age: 22
                }, {
                    id: 3,
                    name: "zs3",
                    age: 23
                }, {
                    id: 4,
                    name: "zs4",
                    age: 24
                }, {
                    id: 5,
                    name: "zs5",
                    age: 25
                }]
            },
            methods: {
                add() {
                    this.userList.push({
                        id: this.id,
                        name: this.name,
                        age: this.age
                    })
                }
            }
        });
    </script>

</body>

</html>

参考：v-for指令的四种使用方式

知识的芬芳和温柔的力量全都拥有的小王同学

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
【前端笔记】十一、v-for循环普通数组、对象数组、对象、数字

Vue指令之v-forv-for可以实现循环，语法格式大概为v-for=“item in list”in后面可以放普通数组、对象数组、对象、数字1、循环普通数组v-for="(item,i) in list"示例：数据准备，在vue实例的data中新增一个list数组data: { list: [1, 2, 3, 4, 5]}遍历数组：<ul> <li v-for="(item,i) in list">索引：{{i}}---每一项：{{item}}<.
复制链接

扫一扫

专栏目录