Vue框架学习笔记——列表渲染：v-for

Bertha 。 2024-02-05 11:40 4阅读 0赞

#### 文章目录 ####

*  前文提要
 *  代码正文

--------------------

## 前文提要 ##

本人仅做个人学习记录，如有错误，请多包涵

主要学习链接：[尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通][Vue2.0_Vue3.0_vuejs]

--------------------

## 代码正文 ##

<body>
      <div id="box">
        <ul>
          <li v-for="(p,index) in persons" :key="index">
            {
       {p.name}}-{
       {p.age}}
          </li>
        </ul>
      </div>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          data: {
          
            persons:[
              {
          id:1,name:'张',age:18},
              {
          id:2,name:'李',age:14},
              {
          id:3,name:'赵',age:19},
            ]
          }
        })
      </script>
    </body>

效果展示：  
![在这里插入图片描述][4d2ee3fa79654cbbbcd8591a0a221682.png]  
上文代码其中的

就是v-for的使用方式，将能够遍历对象、数组、字符串，无论是data中的属性、计算属性都可以。

如果key不写，也就是写成这样

就是默认使用index做遍历时的标记，但是不建议使用index做遍历的下标，遍历带有输入的标签的时候容易出错。（和Vue中的虚拟DOM、真实DOM的机制有关系：**虚拟DOM对比算法**）  
用户能操作的是界面，这个是真实DOM  
key是Vue内部使用的，只会在虚拟DOM中出现，真实DOM中没有。  
可以通过这个链接了解：[key的作用和原理（尚硅谷）][key]

建议使用id做遍历时候的下标，具有唯一标识性，index只是暂时属于某个属性，不是一直属于某个属性，当往最前方插入的时候，后续的下标都会变化，并不会一直属于这个属性。

所以推荐使用id做遍历时的标识

也就是写成这样

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[Vue2.0_Vue3.0_vuejs]: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1
[4d2ee3fa79654cbbbcd8591a0a221682.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/68a210ba25174e4d9bdd622246803693.png
[key]: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=30&vd_source=c34d555a55dc7a4051dceb7bb8e54afd