详解v-for各个参数

开始很懵逼为什么v-for会有三个元素,明明两个就够用了,然后我尝试了一下,用数组存对象然后使用三个元素,index总取不出来。
代码如下:

  <div id="app"> 
        <ul>
            <li v-for="(v,k,index) in users">
                {{v}}====={{k}}====={{index}}
            </li>
        </ul>

    </div>
         <script src="./node_modules/vue/dist/vue.js"></script>
         <script>
             let vm =new Vue({
             el:"#app",
             data:{

                users:[
                    {name:"朱少鹏1",gender:"男",age:"22"},
                    {name:"朱少鹏2",gender:"男",age:"22"},
                    {name:"朱少鹏3",gender:"男",age:"22"},   
                
                    ]
                }
             })
         </script>

展示结果如下,这是因为v-for="(v,k,index)在数组里面只存在两个值,value和key,第三个值并不需要,也就是我这里的k其实是index。
在这里插入图片描述
但是,如果情况变成这样。

    <div id="app"> 
        <ul>
            <li v-for="(user,userkey) in users">
                遍历键和对象:{{userkey}}===={{user}}<br/>
                遍历对象的每一个属性: 
             <span v-for="(value,key,index) in user"> {{index}}===={{key}}===={{value}}</span>
             </li>
        </ul>

    </div>
         <script src="./node_modules/vue/dist/vue.js"></script>
         <script>
             let vm =new Vue({
             el:"#app",
             data:{

                users:[
                    {name:"朱少鹏1",gender:"男",age:"22"},
                    {name:"朱少鹏2",gender:"男",age:"22"},
                    {name:"朱少鹏3",gender:"男",age:"22"},   
                
                    ]
                }
             })
         </script>

在这里插入图片描述

此时的 (value,key,index)分别代表值,属性名和索引,也就是说k,v,index不是你来定义的而是vue自己去判断他有几个可用属性再去给你value index 或者是 value key index

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值