• {{item}}
  • _不使用列表的v-for">
    查看
    • 编辑修改
    • 首页
    • UNITY
    • NODEJS
    • PYTHON
    • AI
    • GIT
    • PHP
    • GO
    • CEF3
    • JAVA
    • HTML
    • CSS
    devbox
    羊村懒王
    这个屌丝很懒,什么也没留下!
    关注作者
    热门标签
    • jquery
    • HTML
    • CSS
    • PHP
    • ASP
    • PYTHON
    • GO
    • AI
    • C
    • C++
    • C#
    • PHOTOSHOP
    • UNITY
    • iOS
    • android
    • vue
    • xml
    • 爬虫
    • SEO
    • LINUX
    • WINDOWS
    • JAVA
    • MFC
    • CEF3
    • CAD
    • NODEJS
    • GIT
    • Pyppeteer
    • article
    热门文章
    • 1【云原生】Docker如何构建镜像
    • 2FFmpeg入门详解之16:音频编码原理_ffmpeg 区别高音低音
    • 3登陆功能的实现_登录功能
    • 4第十二章 C语言调试_查看和修改变量的值_c语言如何查看变量实时的值
    • 5云计算与大数据期末项目 电商大数据离线计算_大数据离线电商项目功能图、流程图、以及主要程序接口、接口函数
    • 6Python安装pycrypto出错处理方法_python安装pycrypto报错
    • 7[附源码]JAVA+ssm计算机毕业设计航空订票系统(程序+Lw)_航空订单系统毕业设计
    • 8stm32使用SPI读取Flash_模拟spi与flash通信
    • 9论文精读--BERT
    • 10SpringBoot整合MongoDB JPA,测试MongoRepository与MongoTemplate用法,简单增删改查+高级聚合_jpa mongodb.repository.query
    当前位置:   article > 正文

    Vue学习笔记之07-v-for循环遍历_不使用列表的v-for

    作者:羊村懒王 | 2024-02-11 19:57:36

    赞

    踩

    不使用列表的v-for

    v-for循环遍历数组

    • v-for循环遍历一个数组, 没有使用索引值(下标值) v-for=“item in arr”
    • v-for循环遍历一个数组, 使用索引值(下标值) v-for="(item, index) in arr"
    <div id="app">
        <!-- v-for循环遍历一个数组, 没有使用索引值(下标值) -->
        <ul>
          <li v-for="item in names">{{item}}</li>
        </ul>
    
        <!-- v-for循环遍历一个数组, 使用索引值(下标值) -->
        <ul>
          <li v-for="(item,index) in names">{{index}} {{item}}</li>
        </ul>
      </div>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            names: ["xiaoLam", "kobe", "jams", "copo"]
          }
        })
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    v-for循环遍历对象

    • v-for=“value in obj” 遍历obj对象中的值value
    • v-for="(value,key) in obj" 遍历obj对象中的值value和键key
    • v-for="(value, key, index) in obj" 遍历obj对象中的值value和键key和下标index(很少用)
    <div id="app">
        <!-- v-for="value in obj" 遍历obj对象中的值value -->
        <ul>
          <li v-for="value in obj">{{value}}</li>
        </ul>
    
        <!-- v-for="(value,key) in obj" 遍历obj对象中的值value和键key -->
        <ul>
          <li v-for="(value,key) in obj">{{value}},{{key}}</li>
        </ul>
    
        <!-- v-for="(value, key, index) in obj" 遍历obj对象中的值value和键key和下标index(很少用) -->
        <ul>
          <li v-for="(value, key, index) in obj">{{value}}, {{key}}, {{index}}</li>
        </ul>
      </div>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            obj: {
              name: "xiaoLam",
              age: 18,
              tall: 1.70
            }
          }
        })
      </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    组件的key属性

    • 官方推荐在使用v-for的时候, 给对应的元素添加一个 :key 属性
    • key属性是Vue的虚拟DOM的Diff算法中用来识别元素唯一性的属性
    • 添加这个 :key属性的好处
      • 这个其实和Vue的虚拟DOM的Diff算法有关系
      • 当某一层有很多相同的节点时, 也就是列表节点时,当我们希望插入一个新的节点时, 比如希望在B和C之间插入一个F, Diff算法默认的做法时这样的: 把C更新为F, 把D更新为C, 把E更新为D, 最后再插入一个E, 这样的做法效率时很低的
    • 所以我们需要使用key来给每个节点做一个唯一的标识
      • Diff算法就可以正确地识别这个节点
      • 然后找到正确地位置区插入新的节点
    • 一句话, key地作用主要就是为了高效地更新虚拟DOM
    • :key一定要写入唯一的, 能对应标签的值, 否则没有意义
    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/76750
    推荐阅读
    • articleuniapp 开发小程序之实现不同身份展示不同的 tabbar(底部导航栏),附带相关问题解答_un...
      uniapp 开发小程序之实现不同身份展示不同的 tabbar(底部导航栏),附带相关问题解答_uniapp + uvi...

      赞

      踩

    • articleLaTeX 插入图片_latex 图片导入格式...
      LaTeX中一般只直接支持插入eps(Encapsulated PostScript)格式的图形文件, 因此在图片插入l...

      赞

      踩

    • articleSTM32使用PWM控制LED灯的亮灭程度_stm32pwm控制led亮度...
      脉冲宽度调制(PWM),是英文“Pulse Width Modulation”的缩写,简称脉宽调制,是利用微处理器的数字...

      赞

      踩

    • articlespringboot jar包启动方式_springboot jar包运行方式...
      1. linux环境下启动jar包启动命令:nohup java -jar xxx.jar > xxx.txt &noh...

      赞

      踩

    • articleOpenCV入门(九)——图像分割技术之分水岭分割...
      图像分割是利用图像特征灰度、颜色、纹理和形状等将图像中特定的具有独特性质的区域进行划分,进而实现感兴趣的目标的提取。根据...

      赞

      踩

    • articleSTM32CubeMX学习教程之五:PWM实现呼吸灯效果_stm32cubemx新建工程文件为啥提示...
      完整源码下载:https://github.com/simonliu009/STM32CubeMX-PWM-Output...

      赞

      踩

    • article学习常用的Dos命令_学习常用的dos指令...
      Dos命令提供用户使用的DOS命令可分为三类:内部命令属DOS命令中常驻内存的一部分,它是在当系统作冷、热启动时由磁盘上...

      赞

      踩

    • article(助力校招)还在找工作的小伙伴看过来,2020年100道Java基础面试题(附答案和解析)_给出如下...
      金九银十,马上2020年10月份就过去了,作为小白是不是还在为拿不到合适的offer烦恼,面试有技巧,知识要过关。操练题...

      赞

      踩

    • articlesolaris系统修改密码步骤...
      一、以root身份登录系统二、修改root的密码 #passwd root输入两次密码 三、使/etc/passwd和/...

      赞

      踩

    • articleLinux下20个常用Linux性能监控工具/命令_linux系统下常用的监控命令...
      此文章不作为商业用途,纯粹的用来学习 20个常用Linux性能监控工具/命令 对于 Linux/Unix 系统管理员...

      赞

      踩

    • articleLinux:信号的保存...
      信号的保存Linux:信号的保存 文章目录 信号相关概念信号...

      赞

      踩

    • article人工神经网络(Artificial Neural Network)...
      神经网络俗称人工神经网络(ANN),由简单神经元经过相互连接行程网状结构,通过调节各连接的权重值,改变链接的强度,进而实...

      赞

      踩

    • article云计算基础_数据中心l1l2l3层分别是什么...
      待到秋来九月八,我花开后百花杀数据中心发展阶段企业自建EDCIDC托管/租用云计算三者对比云计算核心特征云计算参考模型数...

      赞

      踩

    • article【Java语言基础】5.5 Java常用API(String、ArrayList)_java arr...
      Java常用API(String、ArrayList):使用并理解String与ArrayList,了解常用的API,认...

      赞

      踩

    • articlemysql 从入门到精通 pdf_MySQL5.7从入门到精通PDF完整版+随书教学视频...
      《MySQL5.7从入门到精通》一书主要包括MySQL的安装与配置、数据库的创建、数据表的创建、数据类型和运算符、MyS...

      赞

      踩

    • article 微信小程序--------语音识别(前端自己也能玩)...
      一、背景作为一名前端同学有时候感觉挺可怜的,复杂的操作都依赖后端同学在服务器端完成。那么,有一天我们自己想玩一个新技术或...

      赞

      踩

    • articlebps与bit/s和Bps与buad/s_bps和bit/s...
      8bit=1byte1bps=1bit/s=byte/s=1Bps比特率:单位时间传输的比特(bit)数。单位bps(b...

      赞

      踩

    • article如何在Java中创建一个新的List_java new list string...
      We create a Set as: 我们创建一个Set为: Set myset = new HashSet() Ho...

      赞

      踩

    • articlePiflowX新增Apache Beam引擎支持...
      Apache Beam 架构原理及应用实践-腾讯云开发者社区-腾讯云 (tencent.com)大数据起源于 Googl...

      赞

      踩

    • articleIT行业的应届大学生,如何制作简历?_计算机行业大学生没有奖项怎么做简历...
      IT行业的应届大学生,如何制作简历?_计算机行业大学生没有奖项怎么做简历
      又快到了一年一度的春招和毕业季。身边还有许多准备从事IT行业的朋友没有找到工作,基兄特此整理了一份关于自己找工作的经验(...

      赞

      踩

    相关标签
    • uni-app
    • 小程序
    • visio
    • 图形
    • 文档
    • postscript
    • windows
    • float
    • stm32
    • 单片机
    • arm
    • opencv
    • 计算机视觉
    • 人工智能
    • c++
    • 图像分割
    • STM32CubeMX
    • System Workbench
    • 呼吸灯
    • PWM
    • java
    • 1024程序员节
    • 面试
    • 网络

    Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。

      

    闽ICP备14008679号