vue中v-for的使用，离不开的数组

先引入一个例子：

HTML

<ul id="example-2">

<li v-for="(item, index) in items">

{{ parentMessage }} - {{ index }} - {{ item.message }}

</li>

</ul>

JS

var example2 = new Vue({

el: "#example-2",

data: {

parentMessage: "Parent",

items: [

{ message: "Foo" },

{ message: "Bar" }

]

}

})

结果：

这里为什么要写这个v-for呢？是因为它涉及到了JavaScript的迭代器，就是数组的迭代。

数组索引仅是可枚举的整数名，其他方面和别的普通对象属性没有什么区别。for...in 并不能够保证返回的是按一定顺序的索引，但是它会返回所有可枚举属性，包括非整数名称的和继承的。

因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。

如下图的测试：