列表渲染
使用v-for的指令，可以实现view层的数组显示。
它的语法是：item in items。
item表示要迭代的数据，items表示数据源。
实例：
HTML：
<ul id="ulOne">
<li v-for="item in items">
{{item.msg}}
</li>
</ul>JS：
var app = new Vue({
el:"#ulOne",
data:{
items:[
{msg:"1"},
{msg:"2"},
{msg:"3"}
]
}
})数组还提供了第二个参数index作为索引。
它的语法是：(item,index) in items;
实例：
HTML：
<ul id="ulOne">
<li v-for="(item,index) in items">
{{info}}-{{index}}-{{item.msg}}
</li>
</ul>JS：
var app = new Vue({
el:"#ulOne",
data:{
info:"number",
items:[
{msg:"1"},
{msg:"2"},
{msg:"3"}
]
}
})对对象使用v-for
实例：
HTML：
<ul id="ulOne">
<li v-for="value in objects">
{{value}}
</li>
</ul>JS：
var app = new Vue({
el:"#ulOne",
data:{
objects:{
firstname:"peter",
lastname:"sensa"
}
}
})同之前一样，我们可以在参数中添加index和新的参数key（键名）。
HTML：
<ul id="ulOne">
<li v-for="(key,value,index) in objec">
{{index}}--{{key}}:{{value}}
</li>
</ul>JS：
var app = new Vue({
el:"#ulOne",
data:{
objec:{
firstname:"peter",
lastname:"sensa"
}
}
})数组更新检测
vuejs中将js里面可以对数据进行添加，删除等操作的方法来监控数组的变异。
例如运用push（）：
语法是：实例对象.数组名.方法({数组})
app.items.push({msg:"4"})除了改变数组，还有不改变原数组，返回一个新数组的方法。
例如：
app.items = app.items.filter(function(item){return item.msg.match(/1/)})对象更改检测注意事项
由于js的限制，vue中不能直接添加删除对象属性，但是可以响应式的添加删除嵌套的对象属性。
我们以一个实例来举例：
语法是：Vue.set(实例名字.嵌套属性名,属性,值).
我们的数据借用上面存在的v-for的属性实例：
Vue.set(app.objec,"age",12)如果你想赋予多个属性值，可以采用下面的方式：
app.objec = Object.assign({}, app.objec, {
age: 27,
favoriteColor: 'Vue Green'
})显示过滤排序结果
我们想要显示过滤排序结果的副本，而不是改变原数组。
我们可以使用计算属性来显示。
实例：
HTML：
<ul id="ulOne">
<li v-for="fi in evenNumbers">
{{fi}}
</li>
</ul>JS：
var app = new Vue({
el:"#ulOne",
data:{
numbers:[1,2,3,4,5]
},
computed:{
evenNumbers:function(){
return this.numbers.filter(function(number){
return number % 2 == 0;
})
}
}
})PS:或者你也可以使用methods的方式来进行。关于methods的区别我们之前已经介绍过了。
v-for的其他用法
例如：
<li v-for="fi in 10">
{{fi}}
</li>实现在10以内的整数遍历。
PS：v-for和v-if在同一层的时候将会是v-for的优先级更高。