Vue 列表渲染是否使用index作为下标

最新推荐文章于 2022-08-26 15:28:28 发布

Take^that

最新推荐文章于 2022-08-26 15:28:28 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：列表渲染

本文链接：https://blog.csdn.net/qq_37767455/article/details/102452916

版权

前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

Vue中文文档

案例代码：

<body>
    <!--1.性能最优: key值唯一 且尽量不使用index作为key -->
    <!-- <div id="app">
      <div v-for="(item,index) of list"
           :key="item.id">
        {{item.text}} --- {{index}}
      </div>
    </div> -->

    <!--
    <script>
        // vue中不能通过下标改变数组，而要通过专门操作数组的方法
        /*
        数组在js中是引用类型，还可以通过改变引用来操作数组
        操作list的引用，让它指向另一块地址空间， 控制台中这样写：
            vm.list=...
        */
        var vm=new Vue({
            el:'#app',  
            data:{
                list:[{
                        id:"16180600727",
                        text:"tony"
                    },{
                        id:"16180600780",
                        text:"huba"
                    },{
                        id:"16180600756",
                        text:"pika"
                    }]
            }
        });


    </script>
    -->

    <!--2.使用index作为key -->
    <div id="app">
        <div v-for="(item,key,index) of userInfo">
            {{item}} --- {{key}} -- {{index}}
        </div>
    </div>


    <script>
        var vm=new Vue({
            el:'#app',  
            data:{
                userInfo:{
                    name:"tony",
                    age :"23",
                    gender:"male",
                    salary:"secret"
                }
            }
        });
    </script>
</body>

在这里插入图片描述

Take^that

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 列表渲染是否使用index作为下标

案例代码：<body>  <!-- <div id="app"> <div v-for="(item,index) of list" :key="item.id"> {{item.text}} ---...
复制链接

扫一扫