v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
v-for的关键词in可以用of来替代
v-for循环数组
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
在循环数组的情况下for还可以支持俩个参数,除了item外还有index索引,另外for循环的时候该元素可以正常访问vue其它属性
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
v-for循环对象
(这里的遍历对象是遍历一个对象的所有属性)
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
v-for循环对象最多可以传入三个参数分别是value、name、index(其中name和index为可选项)
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
维护状态(不太理解)
大概理解的意思是Vue更新使用v-for渲染的列表的时候,并不会通过移动Dom元素的方式进行,而是通过更新的每一个元素的方式进行…具体的看文档吧,总之教程表达的意思就是用v-for的时候尽量带上key属性(key的值需要时js基本类型)。如下:
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
这个key属性我带入代码中试了一把,在页面上是找不到这个属性的…不知道为啥
v-for之前对数组或对象进行处理的需求
这时候我们可以用到computed计算属性,不改变原数组,修改遍历,代码如下
<li v-for="n in evenNumbers">{{ n }}</li>
----------------------------------------------------------------
//Vue部分
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
在computed不适合的时候可以放到methods中,你懂的
v-for可以使用常量
比如:
<span v-for="n in 10">{{ n }} </span>
结果:1,2,3.....10
关于template标签
这个是神仙标签,就是它是个标签但是它不会被渲染显示,HTML5规定的。
在组件上使用for
首先在组件中使用for,key属性是必须的。
组件具有独立的作用域所以vue对象中的任何属性它都不能直接碰。
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>