vue中v-for的使用,离不开的数组
先引入一个例子:HTML{{ parentMessage }} - {{ index }} - {{ item.message }}JSvar example2 = new Vue({el: '#example-2',data: {parentMessage: 'Parent',items: [{ message: 'Foo' },{ mes
·
先引入一个例子:
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
循环) 。
如下图的测试:
更多推荐
已为社区贡献42条内容
所有评论(0)