vue2之v-for详解

了解vue的应该都知道v-for指令是用来遍历数组、对象的，但是vue居然还能遍历整数！！！第一眼看到遍历v-for整数的代码我觉得是写错了。。。好吧，是我太菜了。接下来我们一起来看看。

（1）遍历数组

<ul id="example-1"><li v-for="(item, index) in items" :key="index">{{ item.message }}</li>
</ul>var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})

也可用 of 替代 in 作为分隔符。

<div v-for="(item, index) of items" :key="index"></div>

（2）遍历对象

<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}
</div>new Vue({el: '#v-for-object',data: {object: {firstName: 'John',lastName: 'Doe',age: 30}}
})

在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下是一致的。

（3）遍历整数

理论上来说，整数不是一个可遍历的单元，但是vue相当于给我们提供了一个方便方式来减少重复代码。

<div id="app"><ul><li v-for="n in num">{{n}}</li></ul>
</div>new Vue({el: '#app',data: {num: 3}
})

结果会渲染出 1,2,3。

好奇去看了下vue实现源码。其实原理很简单，就是判断不同的数据类型来进行不同的遍历。主要代码如下：

if (Array.isArray(val) || typeof val === 'string') {ret = new Array(val.length);for (i = 0, l = val.length; i < l; i++) {ret[i] = render(val[i], i);}} else if (typeof val === 'number') {ret = new Array(val);for (i = 0; i < val; i++) {ret[i] = render(i + 1, i);}} else if (isObject(val)) {keys = Object.keys(val);ret = new Array(keys.length);for (i = 0, l = keys.length; i < l; i++) {key = keys[i];ret[i] = render(val[key], key, i);}}

vue2之v-for详解相关推荐

多重背包O(N*V)算法详解（——使用单调队列）
多重背包O(N*V)算法详解(--使用单调队列) 多重背包问题: 有N种物品和容量为V的背包,若第i种物品,容量为v[i],价值为w[i],共有n[i]件.怎样装才能使背包内的物品总价值最大? 网上关 ...
vue2使用国际化vue-i18n详解+ES6的import和export区别
1.安装vue-i18n: npm install vue-i18n@6 -s 坑大了,我用vue2写一开始没考虑到兼容性,直接npm i vue-i18n装了最新的9.2.2版本的,装完控制台有兼 ...
windbg- !analyze -v 信息详解
当下面的命令行运行出现 !analyze-v(常用的一个分析命令)蓝色命令时,点击它就将得到DMP文件详细的信息.从中找到蓝色字母部分就是什么软件引起的蓝屏了.[以上来自<电脑爱好者>24 ...
windbg- !analyze -v 信息详解
https://blog.csdn.net/a3125504x/article/details/77963883 当下面的命令行运行出现!analyze-v(常用的一个分析命令)蓝色命令时,点击它就将 ...
Vue2.0 脚手架代码详解
参考作者:https://www.jianshu.com/p/2b661d01eaf8 只是为了方便个人学习. 来看一下脚手架创建后的项目目录说明:在*.vue文件,template标签里写htm ...
Vue2.0 Component的详解（重点）
1.0 全局的component&局部的component <div id="app"><lhq></lhq> </div> ...
论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...
php编译工具知乎,关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解...
貌似我没有像QQ邮箱之类的装知乎的插件是用HTML5的新功能实现的吗? 看了@朱利安的回答,发现我描述的不够清楚我是用QQ截图之类的工具截的图,然后图片本身是保存在剪切板里的,剪切板中保存的*不 ...
vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
矢量控制与V/F控制详解
原文:http://m.elecfans.com/article/714518.html 一.矢量控制 1.矢量控制简介矢量控制是一种电机的磁场定向控制方法:以异步电动机的矢量控制为例:它首先通过电 ...

vue2之v-for详解

（1）遍历数组

（2）遍历对象

（3）遍历整数

vue2之v-for详解相关推荐

最新文章

热门文章