四、VUE基础学习篇（循环v-for）- v-for、v-bind:key_vue v-for v-bind-程序员宅基地

技术标签： vue循环遍历 v-for vue v-bind key Vue学习

码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi

VUE基础篇（循环遍历）

1、v-for

v-for 是vue标签中指定for循环的指令，标签对应的值的也就是类似python中for循环或者java中foreach的写法
在vue中遍历可以分为三个部分：
1）遍历数组
2）遍历对象
3）数字迭代

1.1 遍历数组

遍历数组可以分为两种：
1）遍历元素，格式：元素 in 数组
2）遍历元素和索引，格式：(元素,索引) in 数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>循环指令</title>
</head>
<body>
<div id="app">

  <!-- ■【遍历数组】-->
  <!--  v-for是vue标签中指定for循环的标签，标签对应的值的也就是类似python中for循环或者java中foreach的写法
        除了直接获取到每个数组的元素，还可以获得元素和索引值，(item,index) 对应 (元素,索引)-->
  <li v-for="item in movies">{
   {item}}</li>
  <hr>
  <li v-for="(item,index) in movies">{
   {index}}-{
   {item}}</li>
  <hr>
  
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: "#app",
    data: {
     
      movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

1.2遍历对象

遍历对象可以分为三种：
1）遍历对象属性值，格式：属性值 in 对象
2）遍历对象属性值和属性名，格式：(属性值,属性名) in 对象
3）遍历对象属性值和属性名和索引，格式：(属性值,属性名,索引值) in 对象，索引值按对象属性顺序默认从0开始

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>循环指令</title>
</head>
<body>
<div id="app">

  <!-- ■【遍历对象】-->
  <!--  v-for在遍历对象时，如果只获取一个值，那么获取到的是对象属性值value-->
  <li v-for="item in user">{
   {item}}</li>
  <hr>
  <!--  v-for在遍历对象时，获取两个值，那么获取到的是对象属性值value和属性的名称key-->
  <li v-for="(item,key) in user">{
   {item}}-{
   {key}}</li>
  <hr>
  <!--  v-for在遍历对象时，获取三个值，那么获取到的是对象属性值value和属性的名称key和属性的顺序索引index，索引默认从0开始-->
  <li v-for="(item,key,index) in user">{
   {item}}-{
   {key}}-{
   {index}}</li>
  <hr>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: "#app",
    data: {
     
      user: {
     
        name: "kobe",
        age: 43,
        height: 196
      }
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

1.3 数字迭代

数字迭代就是根据一个数字number的大小，默认循环number次，循环取出的元素值默认从1开始
格式：元素值 in 数字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>循环指令</title>
</head>
<body>
<div id="app">

  <!-- ■【数字迭代】-->
  <!--  迭代数字，默认从1开始，这里是循环5次，从1开始递增-->
  <li v-for="i in 5">这是第{
   {i}}次迭代</li>
  <hr>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: "#app",
    data: {
     }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

2、v-bind:key

●官方推荐我们在使用v-for时,给对应的元素或组件添加上一个key属性。
为什么需要这个key属性呢(了解) ?
口这个其实和Vue的虚拟DOM的Diff算法有关系
口这里我们借用数组的插入数据时的方式来说明：
数组的插入就是需要插入的点更改为插入的值，后面的元素依次后移
比如：当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点，我们希望可以在B和C之间加一个F, 默认执行起来是这样的.即把C更新成F, D更新成C , E更新成D,最后再插入E,是不是很没有效率？所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
所以一句话, key的作用主要是为了高效的更新虚拟DOM，可以简单理解为数组和链表之间的插入效率对比
如图（默认插入操作）：

在这里插入图片描述
v-bind:key 绑定的值要保证唯一性不可变化性，可以理解成sql中的主键

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>循环指令</title>
</head>
<body>
<div id="app">

  <!--
  ■【v-bind:key 的使用】：

  ●官方推荐我们在使用v-for时,给对应的元素或组件添加上一个key属性。
  口为什么需要这个key属性呢(了解) ?
    口这个其实和Vue的虚拟DOM的Diff算法有关系
    口这里我们借用React' s diff algorithm中的一张图来简单说明一下:
  口当某一层有很多相同的节点时,也就是列表节点时,我们希望插入一个新的节点
    口我们希望可以在B和C之间加一个F, Diff默认执行起来是这样的.
    口即把C更新成F, D更新成C , E更新成D,最后再插入E,是不是很没有效率？
  口所以我们需要使用key来给每个节点做一个唯一标识
    口Diff算法就可以正确的识别此节点
    口找到正确的位置区插入新的节点。
  口所以一句话, key的作用主要是为了高效的更新虚拟DOM，可以简单理解为数组和链表之间的插入效率对比
  -->

  <!--  ●绑定key最好和元素保持一致，而不是用索引index来绑定key,原因是索引会变化，因为我们在数组中间插入一个元素，元素的索引也会相应的变化，
  就没有保证key的唯一性，为了保证key的唯一性，用元素值来绑定，其实通过元素值来绑定的话必须是数组中元素不等，不然key也有可能相等，如果元素是对象，
  应该用对象中能保证唯一性的属性作为key。总结一句话，key要保证唯一性不可变化性，可以理解成sql中的主键 -->
  <li v-for="(item,index) in chars" :key="item">{
   {item}}-{
   {index}}</li>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
     
    el: "#app",
    data: {
     
      chars: ['A', 'B', 'C', 'D', 'E']
    }
  });
</script>
</body>
</html>

效果
在这里插入图片描述

本文链接：https://blog.csdn.net/IT_CREATE/article/details/106587265

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【转】2023年Java学习路线图-黑马程序员-程序员宅基地

文章浏览阅读7.5k次，点赞28次，收藏411次。Java面试宝典(含阿里、腾迅大厂java面试真题，java数据结构，java并发，jvm等java面试真题)以100+企业大厂真实高频Java面试真题为主干，辅以数据结构的可视化展示、算法的可视化展示，窥探底层的工具使用等等可视化手段，用直观、形象的方式展现复杂的知识内容，让学生更清晰、更容易地掌握这些Java面试题与Java知识点。简单的说，就是一次大的操作由不同的小操作组成，这些小的操作分布在不同的服务器上，且属于不同的应用，分布式事务需要保证这些小操作要么全部成功，要么全部失败。

UE4的AI行为树基础知识_ue4行为树-程序员宅基地

文章浏览阅读1.4k次。UE4的AI基础学习_ue4行为树

【华为云技术分享】一文带你了解Web前端发展历程_华为云前端发版-程序员宅基地

文章浏览阅读2.5k次。摘要：自互联网行业发展以来，web前端不断发展变化着。在前人的基础上，后人有幸能够站在前人的肩膀上行走。前端的发展变化不仅是继承式的迭代，同时也是不断的变革和创造。一、前端到底是个什么？简单点说，浏览器呈现出来的页面，给用户看的、操作的就是前端（客户端）；你看不到的，类似一些游戏数据、应用数据之类的就是后端（服务端）。那么再简单点就可以说，前端指的就是浏览器端，后端指的就是为浏览器提供服务和数据的服务器端。这是比较准确的描述，如果往大了讲，你所有看到的一切，网页、移动端网页、小程序、甚._华为云前端发版

MutationObserver - 监听Dom变化_mutationobserver.observe-程序员宅基地

文章浏览阅读783次，点赞18次，收藏26次。监听DOM变化（属性变动、目标子节点变化、观察后代节点等）_mutationobserver.observe

【C/C++】freopen 函数和 fopen 函数|标准输入输入写入文件|屏幕输出写入文件-程序员宅基地

文章浏览阅读9.8k次，点赞13次，收藏65次。freopen 和 fopen 都是C的标准库函数被包含于C标准库头文件中。fopen就是我们最熟悉的打开一个文件用于写入or读取freopen 是打开一个文件，用于接收输入输出流的数据。_freopen

python sys.path.append()和sys.path.insert()_sys. addpath-程序员宅基地

文章浏览阅读3.8k次。转载自： https://blog.csdn.net/dcrmg/article/details/79546962python程序中使用 import XXX 时，python解析器会在当前目录、已安装和第三方模块中搜索 xxx，如果都搜索不到就会报错。使用sys.path.append()方法可以临时添加搜索路径，方便更简洁的import其他包和模块。这种方法导入的路径会在python程..._sys. addpath

随便推点

BiLSTM双向长短期记忆神经网络回归预测算法（基于Matlab实现）_双向bilstm模型-程序员宅基地

文章浏览阅读539次，点赞11次，收藏9次。正向的LSTM网络接受序列数据的初始状态，逐步学习前向信息并更新内部隐藏状态，最终生成前向隐藏状态序列。反向的LSTM网络则以相反的顺序处理序列数据，并生成相应的反向隐藏状态序列。本文将介绍使用Matlab实现的BiLSTM算法，并展示其在多输入单输出回归问题上的应用。然后，我们定义了BiLSTM模型的层次结构，包括序列输入层、BiLSTM层、全连接层和回归层。与传统的单向LSTM相比，BiLSTM能够同时利用序列数据的前向和后向信息，从而提高模型在长期依赖关系上的学习能力。_双向bilstm模型

D78XX系列——用于各种电视机、收录机、电子仪器、设备的稳压电源电路，输出电流大，内设过热、短路保护电路，无需外接元件-程序员宅基地

文章浏览阅读295次，点赞9次，收藏11次。D78XX系列是用于各种电视机、收录机、电子仪器、设备的稳压电源电路。包括D7805、D7806、 D7808、 D7809、 D7810、 D7812、 D7815。● 输出电流大，IOMAX= 1A.● 封装形式: T0-220。● 内设过热、短路保护电路。

stm32入门学习（基于STM32F103C8T6）_stm32f103c8t6csdn-程序员宅基地

文章浏览阅读456次，点赞8次，收藏2次。じゃ、始めましょう。--最近在学外语，对于IT从业者来说，会是一项优势。_stm32f103c8t6csdn

Anaconda安装_anaconda环境变量e:\anaconda3\library\usr\bin-程序员宅基地

文章浏览阅读7.1k次，点赞41次，收藏196次。文章目录1.Anaconda是什么2.Anaconda下载3.Anaconda安装4.Anaconda环境变量配置5.检验是否安装成功6.检验Anaconda Navifator是否安装成功7.修改Anaconda镜像修改为清华大学镜像移除清华大学镜像8.PyCharm配置Anaconda方式一（建立新的项目时）方式二（已经打开项目）9.总结1.Anaconda是什么Anaconda指的是一个开源的Python发行版本，其包含了conda、Python等180多个科学包及其依赖项。Anaconda也是P_anaconda环境变量e:\anaconda3\library\usr\bin

70个常用电脑快捷键，帮你工作效率提升100倍！职场新人必备！_快捷键可以帮助自己-程序员宅基地

文章浏览阅读2k次，点赞11次，收藏44次。电脑快捷键不仅可以帮助我们熟练的操作电脑，还可以帮助我们快速提升自己的工作效率，从此跟加班说拜拜！但由于电脑快捷键过于繁多不方便我们记忆！那么今天小编为大家整理的70个Wordows、Ctrl、Alt、Shift组合快捷键，运用好的话能够帮你工作效率提升100倍！希望能为大家派上用途！下面以图片&文字的形式展现给大家！文字可以直接复制！图片也可以直接拿去收藏！..._快捷键可以帮助自己

用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页_用html做一个生日快乐网页-程序员宅基地

文章浏览阅读2.2w次，点赞317次，收藏636次。明天就是女朋友的生日了, 是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！_用html做一个生日快乐网页