第6讲:v-for使用

目录

        1.循环遍历

        2.v-for遍历整形变量(99乘法表)

        3.v-for遍历普通数组

        4.v-for遍历数组对象

1.循环遍历

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
  v-for=”item in list”
  list 是一个数组, item 是当前被遍历的对象 
     
  • {{ item }}
  •  
      在数组进行遍历时,我们必须给遍历对象绑定一个对应的 key 值以保证对象的唯一性
      使用 v-bind:key 指令进行绑定
    v-for 中key的作用
    1、 key的作用主要是为了高效的更新虛拟DOM,通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操作量,提高性能。
    2、 若不设置key可能在列表更新时引发一些隐蔽的bug。如某行数据不该更新的却更新了。
    3、vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。

    2.v-for遍历整形变量(99乘法表)

    九九乘法表


    {{j}}*{{i}}={{i*j}}

    第6讲:v-for使用_第1张图片

    3.v-for遍历普通数组

    语法 : v-for="(item,index) in array"

    item : 数组中的每一项

    index : 索引值

    如果只需要第一个参数item ,index可以不写,括号可以省略

    
    
    

    第6讲:v-for使用_第2张图片

      4.v-for遍历数组对象

    语法 : v-for="(item,index) in array"

    item : 数组中的每一项(每一个对象)

    index : 索引值

    如果只需要第一个参数item ,index可以不写,括号可以省略

    
    
    

    第6讲:v-for使用_第3张图片

    案例完整代码如下

    
    
    

    本人从事软件项目开发20多年,2005年开始从事Java工程师系列课程的教学工作,录制50多门精品视频课程,包含java基础,jspweb开发,SSH,SSM,SpringBoot,SpringCloud,人工智能,在线支付等众多商业项目,每门课程都包含有项目实战,上课PPT,及完整的源代码下载,有兴趣的朋友可以看看我的在线课堂

    讲师课堂链接:https://edu.csdn.net/lecturer/893

    你可能感兴趣的:(elementui,vue,前端框架,javascript)