vue.js入门 1.v-for中in与of的区别：

最新推荐文章于 2024-12-31 16:31:28 发布

梦里的紫苏

最新推荐文章于 2024-12-31 16:31:28 发布

阅读量1.2w

点赞数 8

分类专栏： vue入门学习文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42677616/article/details/105574298

版权

vue入门学习专栏收录该内容

5 篇文章

订阅专栏

在v-for中in与of在使用中没有区别，都可以遍历数组和对象，在遍历数组时，key与index的值相同，一般会略去key只写（item，index）；

注意：在使用v-for时，v-bind:key不能省略，一般简写为 :key="index"

例子如下：

打印出的结果是相同的：如下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梦里的紫苏

关注关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

大数据新视界 --大数据大厂之 Vue.js 与大数据可视化：打造惊艳的数据界面

【青云交】华为云云享专家，在技术圈个人影响力位居前 17，跻身博客之星 TOP23。全国原力、全网领军人物双料登顶，作者周榜位居前二，苏州地区各榜也统统拿下榜首之位，实力爆棚！

09-23

5060

本文深入探讨 Vue.js 在大数据可视化中的应用。介绍了其优势，如数据驱动视图更新和组件化开发，以及与 Echarts、D3.js、Highcharts、Leaflet 等可视化工具结合。还阐述了性能优化策略，包括懒加载数据、虚拟滚动、代码分割和缓存策略。通过医疗、交通、教育、环保等实际案例分析，展示了 Vue.js 与大数据可视化结合的强大能力。为开发者提供全面的技术指导和参考。

vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同

weixin_47970316的博客

12-25

7388

前端for-of for-in 遍历对象和数组的区别以及v-for-of和v-for-in遍历对象和数组的区别

1 条评论您还未登录，请先登录后发表或查看评论

vue.js中：v-for中in 和 of的区别

weixin_63896561的博客

04-28

704

没有区别。

Vue 中 v-for 进阶指南：in 与 of 的区别与使用场景

2401_86113453的博客

09-19

1533

in在JavaScript中，for...of是遍历可迭代对象的标准语法。类似地，在Vue.js中，v-for结合of可以遍历一切可迭代对象，如数组、字符串、SetMap等。尽管of并没有广泛应用于Vue.js文档中的例子，但它在处理特定数据结构时非常有效。ofv-for是Vue.js中非常强大和常用的指令，而理解in和of的差异能够帮助你更灵活地处理不同的数据结构。无论是遍历数组、对象，还是其他复杂数据结构，正确选择in或of都能让代码更加高效、易读。在你下次需要使用v-for。

前端入门学习笔记（三十五）vue.js入门（三）条件 v-if 与循环 v-for，v-for 中 in 和 of 的区别

TUTsmile的博客

08-18

8058

1.v-if v-if相当好理解，这里我就只贴实例代码了 <div id="app"> <p v-if="true">现在你看到我了</p> <p v-if="false">现在你看不到我了</p> <p v-if="seen">现在看得到，因为seen为true</p> </div> &...

v-for中的in和of的区别

conquer_galaxy的博客

04-05

292

v-for中的in和of的区别

尚硅谷VUE技术教程(基于vue2.5录制，vue.js快速入门)----学习笔记

weixin_54362826的博客

04-06

1162

参考：尚硅谷教程目录一、介绍二、基本认识1. 遵循MVVM模式2. 创建一个Vue实例一、介绍 Vue是一套渐进式框架，用来动态构建用户界面(view)。二、基本认识 1. 遵循MVVM模式 M：model，数据对象（data中的数据） V：view，模板页面（页面中所显示的内容），是动态的html页面， VM：VueModel，new 的Vue对象，也就是vm对象 2. 创建一个Vue实例 <body> <div id="app"><!-- view 所要显示的

nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用

weixin_45041261的博客

05-31

1705

实话：我之前完全不知道vue-waterfall-easy这个插件，当我看到需求瀑布流+无限滚动的时候，我脑子里想的还是flex布局。。。我们大佬说“你自己写的瀑布流+无限滚动肯定会出问题的”，然后我就果断放弃了（毕竟我是一个还没有入门的菜鸡），大佬给我普及了这个插件以及在vue中如何使用，让我自己找一找在nuxt里面的引入方法（这个任务，我也很果断，20分钟没有头绪，直接回头找大佬，哈哈哈哈哈哈）所以在这里再总结一下引入的方法（使用方法我也是一知半解，探索中，所以不敢胡乱BB）。这次在nuxt的引入

使用 Vue CLI 创建 Vue.js 项目的详细指南

最新发布

chaosweet的博客

12-31

1860

千里之行，始于足下。

1. vue3从零搭建项目-页面初始

weixin_55555471的博客

10-07

1596

vue3+typescipt 项目开发

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

weixin_43818659的博客

12-28

9176

Vue v-for详细使用 + for in 、for of + 数组扁平化(flat）(1)

2401_84434954的博客

04-29

486

定义vue数据data: {//数组arr2: [{title: ‘星期一’}, {title: ‘星期二’}, {title: ‘星期三’}],//对象area: {“A”: [“安阳”, “安徽”],“B”: [“北京”, “保定”],“C”: [“长安”, “长沙”]},},vue循环数组v-for循环数组的时候有两个参数第一个是数组项(表示数组中的每一项) 第二个是索引值也叫下标。

for in与for of区别

Mybells

07-18

424

//for..in.. : for(var i in {a:1,b:2}){console.log(i)}//a,b for(var i in [1,2]){console.log(i)}//0,1 //在vue中v-for和for..in..不一样 <div v-for="(item, index) in items"></div> <div v-for="(v...

for in与for of的区别

yjxkq99的博客

09-20

2148

区别二：for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array。区别一：for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array。for in更适合遍历对象，当然也可以遍历数组，但是会存在一些问题。

v-for 循环中 in 与 of 区别，以及 ES5 for in 与 ES6 for of 区别

weixin_50339217的博客

04-21

2071

const arr = ['张三','李四','王五'] const obj = [{ name:'张三' },{ name:'李四' }] v-for="(item,index) in ( arr || obj )" :key="index" v-for="(item,index) of ( arr || obj )" :key="index" // 遍历数组或数组对象时，item 为数组或数组对象的值, index 为数组的索引。使用 in 或 of 两者是没有区别的 // -..

Vue实践--V-for指令

热门推荐

codesWay的博客

12-04

1万+

当需要将一个数组或者对象循环遍历显示的时候可以使用v-for指令，其值类似于item in items；其中items是数组或者对象，item自然就是其中的一项，in 也可使用 of。当遍历数组的时候有一个可选项index，是当前项的索引类似与 v-for = (item,[index]) in items; {{index}}.{{book.bookName}}

Vue.js 指令v-for和v-if和v-show

02-19

8830

Vue指令之v-for和key属性迭代数组 &amp;amp;amp;lt;ul&amp;amp;amp;gt; &amp;amp;amp;lt;li v-for=&amp;amp;quot;(item, i) in list&amp;amp;quot;&amp;amp;amp;gt;索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}&am

VUE列表渲染 FOR-IN和FOR-OF的区别

许久

12-19

686

for..in和for..of的区别

xvzhengyang的博客

10-23

1088

for...in可以枚举对象;for..of不可以 var obj = { a: 1, b: [], c: function () { } }; for (var key in obj) { console.log(key); } // 结果是： // a // b // c 若换成for...of那么会报错 Uncaught TypeError: o...

v-for用法vue

08-23

v-for是Vue.js中的一个指令，它用于在模板中遍历数组或对象，并按照指定的方式进行渲染。可以通过在元素上使用v-for指令来循环渲染元素。在Vue.js中使用v-for指令需要结合in或者of来使用。例如，在Vue.js中使用v-for指令来遍历数组，可以使用以下语法： ``` <ul> <li v-for="item in language">{{ item }}</li> </ul> ``` 其中，language就是要遍历的数组，item表示数组中的每个元素。在这个例子中，会根据language数组的长度复制相应数量的li元素，每个li元素中的内容为数组中的每个元素。除了遍历数组，v-for指令也可以用于遍历对象。例如： ``` <ul> <li v-for="(item, index) in person">{{ index }}. 我会使用: {{ item }}</li> </ul> ``` 在这个例子中，person表示要遍历的对象，item表示对象中的每个属性值，index表示属性的索引。在每个li元素中，会显示索引值以及属性值。总结来说，v-for指令是Vue.js中一个常用的遍历方法，它可以用于循环渲染数组或对象，并按照指定的方式进行渲染。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue快速入门(九) 之 v-for用法](https://blog.csdn.net/weixin_44415928/article/details/104904997)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue中v-for的用法](https://blog.csdn.net/yilanyoumeng3/article/details/88176124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]