如何使用v-for遍历数据_v-for遍历数字

Java图灵架构

于 2024-04-12 13:00:06 发布

阅读量428

点赞数 4

分类专栏： 2024年程序员学习文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_62673499/article/details/137676682

版权

2024年程序员学习专栏收录该内容

257 篇文章 0 订阅

订阅专栏

v-for遍历数据

<div id="app">
  <!--1.在遍历的过程中，没有使用索引值（下标值） -->
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>

  <!--2.在遍历的过程中，获取索引值-->
  <ul>
    <li v-for="(item,index) in names">
      {{index + 1}}.{{item}}
    </li>
  </ul>
</div>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            names: ['Pengfei','Kobe','Tom','Anne']
        }
    })
</script>

在这里插入图片描述

v-for遍历对象

普通型：

<div id="app">
    <ul>
      <li>{{info.name}}</li>
      <li>{{info.age}}</li>
      <li>{{info.height}}</li>
    </ul>
</div>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
          info: {
            name: 'Anne',
            age: '18',
            height: '1.80'
          }


        }
    })
</script>

在这里插入图片描述

遍历对象

<div id="app">
  <h2>v-for遍历对象</h2>
  <!--1.在遍历对象的过程中，如果只是取一个值，那么获取到的是value-->
    <ul>
      <li v-for="item in info">{{item}}</li>
    </ul>

  <!--2.获取key和value 格式：（value，key）-->
  <ul>
    <li v-for="(value, key) in info">{{value}}--{{key}}</li>
  </ul>

  <!--3.获取key和value, index 格式：（value，key,index）-->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}--{{key}}--{{index}}</li>
  </ul>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
          info: {
            name: 'Anne',
            age: '18',
            height: '1.80'
          }


        }
    })
</script>

在这里插入图片描述

（理解）v-for绑定key的区别

# 组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加一个：key属性。

为什么需要这个key属性呢？
	这个其实和Vue的虚拟Dom的Diff算法有关系。
	这里我们借用React's diff algorithm 中的一张图来简单说明一下：
	
当某一层有很多相同的节点的时候，也就是列表节点，我们希望插入一个新的节点
	我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的。


**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数Linux运维工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年Linux运维全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/86a3550a610d77f4779392005d02f8e5.png)
![img](https://img-blog.csdnimg.cn/img_convert/758fbd03681598e51b0c0a3af9c4f45c.png)
![img](https://img-blog.csdnimg.cn/img_convert/b5fe61cdb9f589f09f3fba5aa209b3e6.png)
![img](https://img-blog.csdnimg.cn/img_convert/cc2869a4f764d4a6e532ca41b759ef66.png)
![img](https://img-blog.csdnimg.cn/img_convert/0f4c0c7ba5a0b792abc72c43f24ba9f4.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Linux运维知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip1024b （备注Linux运维获取）**
![img](https://img-blog.csdnimg.cn/img_convert/4da1f8c3b8b2736039ad70af4c3f3ee5.jpeg)

比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip1024b （备注Linux运维获取）**
[外链图片转存中...(img-FLGn6R87-1712897991312)]