vue v-for指令

2021-12-13 19:00:12 阅读：139 来源： 互联网

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

基本使用

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

var vue = new Vue({
            el: "#app",
            data: {
                arr: [
                    '苹果',
                    '橘子',
                    '香蕉',
                    '草莓'
                ]
            }
})

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

v-for还有index和key属性

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

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>

在这里插入图片描述

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

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

上面的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>

在这里插入图片描述

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>

在这里插入图片描述

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

(item,index) in arr

标签：index,vue,name,sex,item,指令,key
来源： https://blog.csdn.net/a772304419/article/details/121911856

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue v-for指令