js中for(const i in/of arr/obj)和vue中v-for指令的区别

在js中

 var obj = {q:'qqq',w:'www',e:'eee'}var arr1 = [{r:'rrr'},{t:'ttt'},{y:'yyy'}]var arr2 = ['uuu','iii','ooo']for(let i in obj){console.log(i)//键名}for(let i in arr1){console.log(i)//下标}for(let i in arr2){console.log(i)//下标}for(let i of obj){console.log(i)//报错，obj不是可迭代的}for(let i of arr1){console.log(i)//值 {r:'rrr'}...}for(let i of arr2){console.log(i)//值 uuu...}

小结：for(let i in arr/obj)遍历数组时遍历的是下标，遍历对象时遍历的是键名。for(let i of arr)遍历数组时遍历的是值，遍历对象会报错(不可迭代)。

在vue中v-for指令

new Vue({el: '#box',data: {posts1: [{ id: 1, title: 'My journey with Vue' },{ id: 2, title: 'Blogging with Vue' },{ id: 3, title: 'Why Vue is so fun' }],posts2: ['qq','ww','ee'],posts3: {name1:'rr',name2:'tt',name3:'yy'}}
})<div id='box'><div v-for="(post,i) in posts1" :key="post.id">{{post}}-{{i}}</div><div v-for="(post,i) of posts1" :key="post.id">{{post}}-{{i}}</div><br/><div v-for="(post,i) in posts2" :key="post.i">{{post}}--{{i}}</div><div v-for="(post,i) of posts2" :key="post.i">{{post}}--{{i}}</div><br/><div v-for="(post,i,j) in posts3" :key="post.j">{{post}}-{{i}}-{{j}}</div><div v-for="(post,i,j) of posts3" :key="post.j">{{post}}-{{i}}-{{j}}</div>
</div>

小结：posts无论是数组，对象或者对象数组，无论是 in/of 遍历的永远是值。如果是数组，若想遍历下标可以用v-for=’(i,j) in/of posts’，其中 i 是值 j 是下标；如果是对象，若想遍历下标和键名可以用v-for=’(i,j,n) in/of posts’，其中 i 是值 j 是键名 n 是下标。

可能有错误，还请指正！

js中for(const i in/of arr/obj)和vue中v-for指令的区别相关推荐

vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
js微信禁用右上角的分享按钮，，和vue中微信页面禁用右上角的分享按钮的问题
1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过 ...
vue中data定义数字类型_[乐意黎原创] Vue中data定义的三种方式和区别
在 Vue中,定义data时,经常有好几种写法,一不小心会混淆,这里彻底详述一下,以便记分清 . 一.在vue中,定义data可以有三种写法. 1. 第一种写法,data是一个对象. var app ...
three.js后期处理-使用UnrealBloomPass通道在场景中添加泛光效果，三维物体表面发光效果(vue中使用three.js85)
使用UnrealBloomPass通道在场景中添加泛光效果 1.demo效果 2. 重要知识点 2.1 回顾要点 2.2 UnrealBloomPass通道介绍 3. 实现要点 3.1 相关文件引入 ...
苹果ajax跨域,vue中解决axios跨域问题【ajax在vue中的应用】
兴冲冲的开始用vue封装组件.自定义指令之后,开始实战.诶,等等,貌似少了--ajax交互? 好吧大致研究了一下axios,但是存在以下两个问题: 1.跨域问题 2.数据格式问题跨域信息示例: Fa ...
Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
Vue中权限控制完全实现
一.菜单权限的实现: 在登录请求中会得到权限数据,当然这个需要后端返回数据的支持,前端根据权限数据展示对应的菜单,点击菜单才能查看相应的界面. 登录之后获取到的数据: [{path: "/m ...
js去掉前后空格的函数_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...

js中for(const i in/of arr/obj)和vue中v-for指令的区别

在js中

在vue中v-for指令

js中for(const i in/of arr/obj)和vue中v-for指令的区别相关推荐

最新文章

热门文章