1 基本用法
當遍歷一個數組或枚舉一個對象進行迭代循環展示時，就會用到列表渲染指令 v-for。 它的表達式需要結合 in 來使用，類似 item in items 的形式。
1.1 遍歷數組
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億美元收購網絡安全公司Cylance'},
{title: '如何看待阿里巴巴開酒店這件事？'}
]
}
});
</script>
效果：
在 v-for 指令的表達式中， news 是 data 內定義的數據， n 是當前數組元素的別名。
列表渲染指令的表達式也支持使用 of 作為分隔符。
html：
<li v-for="n of news">{{n.title}}</li>
v-for 表達式支持當前項索引參數，索引從 0 開始，它是可選的 。
html：
<li v-for="(n,index) of news">{{index}} - {{n.title}}</li>
效果：
也可以使用內置標簽 <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: '互聯網',content:'黑莓公司周五宣布... ...'},
{title: '社會',content:'阿里實體酒店“FlyZoo Hotel”將開業... ...'}
]
}
});
效果：
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
}
}
});
效果：
遍歷對象屬性，可以帶上兩個可選參數，它們就是對象的屬性名和索引：
html：
<li v-for="(val,name,index) in account">{{index}} - {{name}} : {{val}}</li>
1.3 迭代整數
html：
<div id="app4">
<ul>
<li v-for="i in 5">{{i}}</li>
</ul>
</div>
js：
var app4 = new Vue({
el: '#app4'
});
效果：
2 更新數組
Vue.js 的核心是數據與視圖的雙向綁定。因此當我們修改數組時， Vue.js 就會檢測到數據了變化，所以用 v-for 渲染的視圖也會更新 。使用以下方法修改數組時，就會觸發視圖更新：
這些方法會改變原數組，所以又稱為變異方法。
我們使用 push() 為 app 對象新增一個新聞標題：
js：
app.news.push({
title:'沃爾瑪將超過蘋果成美國第三大在線零售商'
});
效果：
也有一些非變異方法，它們不會改變原數組，只會返回新數組：
我們在使用這些方法時，可以通過設置新數組的方式來更新視圖。
js：
//非變異方法更新數組
app.news = app.news.filter(function (item) {
return item.title.match(/阿里巴巴/);
});
效果：
這個示例中，我們使用 filter 函數，把新聞標題中含有“阿里巴巴”字樣的新聞過濾出來。
Vue.js 在檢測數組變化時，會最大化地復用 DOM 元素。 替換的數組，如果含有相同元素的項并不會被重新渲染，所以不用擔心性能問題。
注意：通過以下方法來改變數組， Vue.js 是無法檢測的，所以不會更新視圖：
app.new[1]={...}
app.new.length=1
我們可以使用 Vue.js 內置的 set 方法（可指定索引）來更新數組：
//通過 set 的設置索引方式來更新數組
Vue.set(app.news,1,{
title: '大數據之下的錦鯉：為什么你的微博總抽不到獎'
});
效果：
也可以使用 splice 指定索引來更新數組：
//通過 splice 的設置索引方式來更新數組
app.news.splice(1, 0, {
title: '南京現“刷臉支付”超市 網友：素顏去結賬機器能識'
});
至于第二個問題，同樣可以通過 splice 來實現：
//通過 splice 來刪除數組元素 app.news.splice(1);
以上示例 demo 。
3 過濾或排序
其實，之前已經有一個示例用到了 filter() 過濾方法。如果我們不想改變原數組，只想返回過濾或排序后數組副本，這時可以使用計算屬性來實現。
html：
<div id="app">
<h4>過濾出帶“美元”的標題</h4>
<ul>
<li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li>
</ul>
<h4>按照標題長度，由短到長排序</h4>
<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億美元收購網絡安全公司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 ）：
總結
以上所述是小編給大家介紹的Vue.js 中的 v-for 列表渲染指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
