快捷導(dǎo)航

深入淺析Vue.js 中的 v-for 列表渲染指令

更新時(shí)間：2018年11月19日 08:46:33 作者：deniro

當(dāng)遍歷一個(gè)數(shù)組或枚舉一個(gè)對(duì)象進(jìn)行迭代循環(huán)展示時(shí)，就會(huì)用到列表渲染指令 v-for。這篇文章主要介紹了Vue.js 中的 v-for 列表渲染指令,需要的朋友可以參考下

1 基本用法

當(dāng)遍歷一個(gè)數(shù)組或枚舉一個(gè)對(duì)象進(jìn)行迭代循環(huán)展示時(shí)，就會(huì)用到列表渲染指令 v-for。它的表達(dá)式需要結(jié)合 in 來(lái)使用，類似 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: '被智能手機(jī)綁架的i世代 愛(ài)熬夜、拒絕戀愛(ài)、不考駕照'},
  {title: '黑莓宣布14億美元收購(gòu)網(wǎng)絡(luò)安全公司Cylance'},
  {title: '如何看待阿里巴巴開(kāi)酒店這件事？'}
  ]
 }
 });
</script>

效果：

在 v-for 指令的表達(dá)式中， news 是 data 內(nèi)定義的數(shù)據(jù)， n 是當(dāng)前數(shù)組元素的別名。

列表渲染指令的表達(dá)式也支持使用 of 作為分隔符。

html：

<li v-for="n of news">{{n.title}}</li>

v-for 表達(dá)式支持當(dāng)前項(xiàng)索引參數(shù)，索引從 0 開(kāi)始，它是可選的。

html：

<li v-for="(n,index) of news">{{index}} - {{n.title}}</li>

效果：

也可以使用內(nèi)置標(biāo)簽 <template> ，渲染多個(gè)元素。

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:'智能手機(jī)是我們生活的好幫手... ...'},
  {title: '互聯(lián)網(wǎng)',content:'黑莓公司周五宣布... ...'},
  {title: '社會(huì)',content:'阿里實(shí)體酒店“FlyZoo Hotel”將開(kāi)業(yè)... ...'}
 ]
 }
});

效果：

1.2 遍歷對(duì)象屬性

我們也可以使用 v-for 列表渲染指令來(lái)遍歷對(duì)象屬性。

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
 }
 }
});

效果：

遍歷對(duì)象屬性，可以帶上兩個(gè)可選參數(shù)，它們就是對(duì)象的屬性名和索引：

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ù)與視圖的雙向綁定。因此當(dāng)我們修改數(shù)組時(shí)， Vue.js 就會(huì)檢測(cè)到數(shù)據(jù)了變化，所以用 v-for 渲染的視圖也會(huì)更新。使用以下方法修改數(shù)組時(shí)，就會(huì)觸發(fā)視圖更新：

push()
shift()
unshift()
splice()
sort()
reverse()

這些方法會(huì)改變?cè)瓟?shù)組，所以又稱為變異方法。

我們使用 push() 為 app 對(duì)象新增一個(gè)新聞標(biāo)題：

js：

app.news.push({
 title:'沃爾瑪將超過(guò)蘋(píng)果成美國(guó)第三大在線零售商'
});

效果：

也有一些非變異方法，它們不會(huì)改變?cè)瓟?shù)組，只會(huì)返回新數(shù)組：

filter()
concat()
slice()

我們?cè)谑褂眠@些方法時(shí)，可以通過(guò)設(shè)置新數(shù)組的方式來(lái)更新視圖。

js：

//非變異方法更新數(shù)組
 app.news = app.news.filter(function (item) {
 return item.title.match(/阿里巴巴/);
 });

效果：

這個(gè)示例中，我們使用 filter 函數(shù)，把新聞標(biāo)題中含有“阿里巴巴”字樣的新聞過(guò)濾出來(lái)。

Vue.js 在檢測(cè)數(shù)組變化時(shí)，會(huì)最大化地復(fù)用 DOM 元素。替換的數(shù)組，如果含有相同元素的項(xiàng)并不會(huì)被重新渲染，所以不用擔(dān)心性能問(wèn)題。

注意：通過(guò)以下方法來(lái)改變數(shù)組， Vue.js 是無(wú)法檢測(cè)的，所以不會(huì)更新視圖：

app.new[1]={...}
app.new.length=1

我們可以使用 Vue.js 內(nèi)置的 set 方法（可指定索引）來(lái)更新數(shù)組：

//通過(guò) set 的設(shè)置索引方式來(lái)更新數(shù)組
Vue.set(app.news,1,{
 title: '大數(shù)據(jù)之下的錦鯉：為什么你的微博總抽不到獎(jiǎng)'
});

效果：

也可以使用 splice 指定索引來(lái)更新數(shù)組：

//通過(guò) splice 的設(shè)置索引方式來(lái)更新數(shù)組
app.news.splice(1, 0, {
 title: '南京現(xiàn)“刷臉支付”超市 網(wǎng)友：素顏去結(jié)賬機(jī)器能識(shí)'
});

至于第二個(gè)問(wèn)題，同樣可以通過(guò) splice 來(lái)實(shí)現(xiàn)：

//通過(guò) splice 來(lái)刪除數(shù)組元素
app.news.splice(1);

以上示例 demo 。

3 過(guò)濾或排序

其實(shí)，之前已經(jīng)有一個(gè)示例用到了 filter() 過(guò)濾方法。如果我們不想改變?cè)瓟?shù)組，只想返回過(guò)濾或排序后數(shù)組副本，這時(shí)可以使用計(jì)算屬性來(lái)實(shí)現(xiàn)。

html：

<div id="app">
 <h3>過(guò)濾出帶“美元”的標(biāo)題</h3>
 <ul>
 <li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li>
 </ul>
 <h3>按照標(biāo)題長(zhǎng)度，由短到長(zhǎng)排序</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: '被智能手機(jī)綁架的i世代 愛(ài)熬夜、拒絕戀愛(ài)、不考駕照'},
  {title: '黑莓宣布14億美元收購(gòu)網(wǎng)絡(luò)安全公司Cylance'},
  {title: '如何看待XXX開(kāi)酒店賺美元這件事？'}
  ]
 },
 computed: {
  //過(guò)濾出帶“美元”的標(biāo)題
  filterNews: function () {
  return this.news.filter(function (item) {
   return item.title.match(/美元/);
  })
  },
  //按照標(biāo)題長(zhǎng)度，由短到長(zhǎng)排序
  sortNews: function () {
  return this.news.sort(function (val1, val2) {
   if(val1.title.length < val2.title.length){
   return -1;
   }
  })
  }
 }
 });
</script>

效果（ demo ）：