1 基本用法
當遍歷一個數(shù)組或枚舉一個對象進行迭代循環(huán)展示時秀又，就會用到列表渲染指令 v-for季惩。 它的表達式需要結(jié)合 in 來使用邀摆，類似 item in items 的形式。
1.1 遍歷數(shù)組
html：
<div id="app">
<ul>
<li v-for="n in news">{{n.title}}</li>
</ul>
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
news: [
{title: '被智能手機綁架的i世代 愛熬夜敬鬓、拒絕戀愛、不考駕照'},
{title: '黑莓宣布14億美元收購網(wǎng)絡安全公司Cylance'},
{title: '如何看待阿里巴巴開酒店這件事笙各？'}
]
}
});
</script>
效果：
在 v-for 指令的表達式中钉答， news 是 data 內(nèi)定義的數(shù)據(jù)， n 是當前數(shù)組元素的別名杈抢。
列表渲染指令的表達式也支持使用 of 作為分隔符希痴。
html：
<li v-for="n of news">{{n.title}}</li>
v-for 表達式支持當前項索引參數(shù)，索引從 0 開始春感，它是可選的 砌创。
html：
<li v-for="(n,index) of news">{{index}} - {{n.title}}</li>
效果：
也可以使用內(nèi)置標簽 <template>，渲染多個元素鲫懒。
html：
<div id="app2">
<dl>
<template v-for="n in news">
<dt>{{n.title}}</dt>
<dd>{{n.content}}</dd>
</template>
</dl>
</div>
js：
var app2 = new Vue({
el: '#app2',
data: {
news: [
{title: '科技',content:'智能手機是我們生活的好幫手... ...'},
{title: '互聯(lián)網(wǎng)',content:'黑莓公司周五宣布... ...'},
{title: '社會',content:'阿里實體酒店“FlyZoo Hotel”將開業(yè)... ...'}
]
}
});
效果：
1.2 遍歷對象屬性
我們也可以使用 v-for 列表渲染指令來遍歷對象屬性嫩实。
html：
<div id="app3">
<li v-for="val in account">{{val}}</li>
</div>
js：
var app3 = new Vue({
el: '#app3',
data: {
account: {
name: 'deniro',
messageCount: 100
}
}
});
效果：
遍歷對象屬性，可以帶上兩個可選參數(shù)窥岩，它們就是對象的屬性名和索引：
html：
<li v-for="(val,name,index) in account">{{index}} - {{name}} : {{val}}</li>
1.3 迭代整數(shù)
html：
<div id="app4">
<ul>
<li v-for="i in 5">{{i}}</li>
</ul>
</div>
js：
var app4 = new Vue({
el: '#app4'
});
效果：
2 更新數(shù)組
Vue.js 的核心是數(shù)據(jù)與視圖的雙向綁定甲献。因此當我們修改數(shù)組時， Vue.js 就會檢測到數(shù)據(jù)了變化颂翼，所以用 v-for 渲染的視圖也會更新 晃洒。使用以下方法修改數(shù)組時，就會觸發(fā)視圖更新：
- push()
- shift()
- unshift()
- splice()
- sort()
- reverse()
這些方法會改變原數(shù)組朦乏，所以又稱為變異方法球及。
我們使用 push() 為 app 對象新增一個新聞標題：
js：
app.news.push({
title:'沃爾瑪將超過蘋果成美國第三大在線零售商'
});
效果：
也有一些非變異方法，它們不會改變原數(shù)組呻疹，只會返回新數(shù)組：
- filter()
- concat()
- slice()
我們在使用這些方法時吃引，可以通過設置新數(shù)組的方式來更新視圖。
js：
//非變異方法更新數(shù)組
app.news = app.news.filter(function (item) {
return item.title.match(/阿里巴巴/);
});
效果：
這個示例中刽锤，我們使用 filter 函數(shù)镊尺，把新聞標題中含有“阿里巴巴”字樣的新聞過濾出來。
Vue.js 在檢測數(shù)組變化時并思，會最大化地復用 DOM 元素庐氮。 替換的數(shù)組，如果含有相同元素的項并不會被重新渲染宋彼，所以不用擔心性能問題弄砍。
注意：通過以下方法來改變數(shù)組颅筋， Vue.js 是無法檢測的，所以不會更新視圖：
- 通過索引來設置項输枯，比如
app.new[1]={...} - 修改數(shù)組長度议泵，比如
app.new.length=1。
我們可以使用 Vue.js 內(nèi)置的 set 方法（可指定索引）來更新數(shù)組：
//通過 set 的設置索引方式來更新數(shù)組
Vue.set(app.news,1,{
title: '大數(shù)據(jù)之下的錦鯉：為什么你的微博總抽不到獎'
});
效果：
也可以使用 splice 指定索引來更新數(shù)組：
//通過 splice 的設置索引方式來更新數(shù)組
app.news.splice(1, 0, {
title: '南京現(xiàn)“刷臉支付”超市 網(wǎng)友：素顏去結(jié)賬機器能識'
});
至于第二個問題桃熄，同樣可以通過 splice 來實現(xiàn)：
//通過 splice 來刪除數(shù)組元素
app.news.splice(1);
以上示例 demo先口。
3 過濾或排序
其實，之前已經(jīng)有一個示例用到了 filter() 過濾方法瞳收。如果我們不想改變原數(shù)組碉京，只想返回過濾或排序后數(shù)組副本，這時可以使用計算屬性來實現(xiàn)螟深。
html：
<div id="app">
<h3>過濾出帶“美元”的標題</h3>
<ul>
<li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li>
</ul>
<h3>按照標題長度谐宙，由短到長排序</h3>
<ul>
<li v-for="(n,index) in sortNews">{{index}} - {{n.title}}</li>
</ul>
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
news: [
{title: '被智能手機綁架的i世代 愛熬夜、拒絕戀愛界弧、不考駕照'},
{title: '黑莓宣布14億美元收購網(wǎng)絡安全公司Cylance'},
{title: '如何看待XXX開酒店賺美元這件事凡蜻？'}
]
},
computed: {
//過濾出帶“美元”的標題
filterNews: function () {
return this.news.filter(function (item) {
return item.title.match(/美元/);
})
},
//按照標題長度，由短到長排序
sortNews: function () {
return this.news.sort(function (val1, val2) {
if(val1.title.length < val2.title.length){
return -1;
}
})
}
}
});
</script>
效果（demo）：
