vue v-for指令

作者：知新_RL | 2024-04-07 15:06:52

踩

vue v-for

v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值

基本使用

<li v-for="item in arr">
    {{item}}
</li>

var vue = new Vue({
            el: "#app",
            data: {
                arr: [
                    '苹果',
                    '橘子',
                    '香蕉',
                    '草莓'
                ]
            }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

item是arr数组的每一项枚举值
在这里插入图片描述

v-for还有index和key属性

<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
1

item指的是被遍历的数组（对象）的每一个值，item的命名不是规定的，可以自定义命名
index指的是每一项被遍历的值的下标索引值
key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新

v-for还可以用来遍历对象

var vue = new Vue({
    el: "#app",
    data: {
        obj:{
            name: '小明',
            age: '17岁',
            height: '175cm',
            sex: '男',
            hobby: '打篮球'
        }
    }
})

<li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这里插入图片描述

和数组内容不同的是index此时代表的是对象的key
正确的表示方法

<li v-for="(item,key,index) in obj" :key="index">{{index}}-{{key}}:{{item}}</li>
1

上面的v-for一共有三个参数
item表示对象的内容，
key表示的是对象key键值名称
index表示的是当前obj的下标索引值
在这里插入图片描述

实际工作中我们使用v-for遍历JSON更多一点

var vue = new Vue({
    el: "#app",
    data: {
        arr: [
            {name:'小明',age: '17',sex:'男',height: '168'},
            {name:'小红',age: '18',sex:'女',height: '165'},
            {name:'小周',age: '19',sex:'男',height: '178'},
            {name:'小刚',age: '20',sex:'男',height: '167'}
        ]
    }
})


<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>身高</th>
    </tr>
    <tr v-for="(item,index) in arr">
        <!-- JOSN中的姓名 -->
        <td>{{item.name}}</td>
        <!-- JOSN中的年龄 -->
        <td>{{item.age}}</td>
        <!-- JOSN中的性别 -->
        <td>{{item.sex}}</td>
        <!-- JOSN中的身高 -->
        <td>{{item.height}}</td>
    </tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

v-for是可以进行嵌套的

<body>
    <div id="app">
        <table>
            <tr v-for="i in number" :key="i">
                <td v-for="j in i" :key="j">{{i}}X{{j}}={{i*j}}</td>
            </tr>
        </table>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                number:[1,2,3,4,5,6,7,8,9]
            }
        })
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

使用 v-for需要注意的情况
1)v-for遍历的出来的不是数据，而是元素
2)如果使用item和index的时候一定要使用括号包裹起来

(item,index) in arr
1

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/379206