欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue列表渲染v-for ... of ... 与 v-for ... in ...区别

程序员文章站 2023-12-23 12:54:46
...

- V-for循环遍历数组时推荐使用of,语法格式为(item,index)

  • item:迭代时不同的数组元素的值
  • index:当前元素的索引

-for循环遍历对象时推荐使用in,语法格式为(item,name,index)

  • item:迭代时对象的键名键值
  • name:迭代时对象的键名
  • index:当前元素的索引

List item在遍历对象时,会按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下都一致,v-for也可以在实现了可迭代协议的值上使用,包括原生的Map和Set。

示例
V-FOR遍历数组

DATA:
    list:[
        {name:'1'},
        {name:'2'},
        {name:'3'}]

html:
<div class="items" v-for='(item,name,index) of list'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in list'>{{item}}->{{name}}->{{index}}</div>

输出结果:
	{ "name": "1" }->0->
	{ "name": "2" }->1->
	{ "name": "3" }->2->
	{ "name": "1" }->0->
	{ "name": "2" }->1->
	{ "name": "3" }->2->

V-FOR遍历对象

DATA:
    listObject:{
        name:'soho',
        age:25,
        class:1909,
        grade:3
    } 

html:
<div class="items" v-for='(item,name,index) of listObject'>{{item}}->{{name}}->{{index}}</div>
<div class="items" v-for='(item,name,index) in listObject'>{{item}}->{{name}}->{{index}}</div> 

输出结果:
    soho->name->0
    25->age->1
    1909->class->2
    3->grade->3
    soho->name->0
    25->age->1
    1909->class->2
    3->grade->3

原文链接:https://www.cnblogs.com/Scooby/p/12160313.html

相关标签: Vue

上一篇:

下一篇: