Vue列表渲染v-for ... of ... 与 v-for ... in ...区别
- 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->025->age->11909->class->23->grade->3soho->name->025->age->11909->class->23->grade->3
原文链接:https://www.cnblogs.com/Scooby/p/12160313.html
Vue列表渲染v-for ... of ... 与 v-for ... in ...区别相关推荐
- 【猿说VUE】Vue列表渲染
8 VUE基础:列表渲染 我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则 ...
- 26.Vue列表渲染中key的作用与原理(内含虚拟DOM的对比算法详解)
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
- Vue基础之Vue列表渲染
列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名 ...
- 万张图片,流畅体验——记一次 Vue 列表渲染
简介: ### 背景 团队目前的Web端产品中需要显示两个列表视图:卡片列表和条目列表,并且在点击切换按钮的时候,对两个列表进行切换显示. ![条目列表](https://ata2-img.oss-c ...
- Vue列表渲染---vue工作笔记0009
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 然后我们再来看一下使用vue去,实现列表的渲染 我们要实现上面这个类似的功能,通过这个功能来看看v ...
- vue列表渲染中key的作用_vue中:key的作用
因为不理解 :key(v-bind:key),网上查了一些的资料,这篇写得非常不错,很简洁清楚. 其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的 ...
- vue列表渲染中key的作用_列表渲染和Vue的v-for指令
Web渲染是Web开发中最常用的实战之一.动态列表渲染通常用于简洁友好的格式向用户渲染一系列相似的分组信息.在我们使用的每个Web应用程序中,都可以看到很多内容列表被用于Web应用程序当中. 在这篇文 ...
- vue 列表渲染 v-for
一.v-for 基本使用 <!--v-for 指令1. 用于展示列表数据2. 语法:v-for="(item, index) in xxx" :key="yyy&q ...
- 7.Vue 列表渲染
在 v-for 里使用值范围 v-for 可以接受整数.在这种情况下,它会把模板重复对应次数. <div><span v-for="n in 10">{{ ...
最新文章
- 防火墙启动被拒绝解决方案
- wince投屏苹果手机_怎么把手机上的导航映射到中控屏
- python scrapy框架 简书_python爬虫框架——Scrapy架构原理介绍
- Oracle_spatial的常见错误与注意事项
- git tag 的基本用法
- linux 中文输入法的安装教程,linux输入法怎么安装
- Java反射常见面试题
- 音阶频率对照表_音符频率对应表
- mysql 数据库快速入门 数据库的发展
- 多道程序设计模拟——C语言实现
- 腾讯会议中用PPT放视频,视频没有声音
- 证件照如何弄蓝白渐变色背景
- postgresql之integerset
- 《2022谷歌开发者大会》参会之旅
- 使用nginx在指定端口做反向代理
- 智能家居时代,怎样选择一把你心底里切实需要的智能门锁?
- 苹果商店上架流程_苹果应用商店APP上架流程介绍!(ASO推广优化)
- matlab趣味程序,小学生C++趣味编程 PDF 全资料版
- 如何将窗口变成半透明
- glidedsky挑战-图片式反爬(雪碧图)
热门文章
- 全球最专业心理测试软件,据说是全球最准的心理测试
- vue实现 文件重命名
- 【excel】python破解excel加密视图
- html中蝴蝶飞飞怎么制作,【幼儿园折纸蝴蝶教案】手工折纸蝴蝶教案_幼儿园手工蝴蝶教案_亲亲宝贝网...
- KATKO KEM640U开关
- 《Vue.js实战》第七章.组件
- AI人工智能对机器人有什么帮助?这些用处可大了
- 【渝粤题库】广东开放大学 服务标准化 形成性考核
- 人脸姿态估计(计算欧拉角)
- 迅龙中文搜索 0.7 nSearch版 C# 源代码下载