腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

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

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

1 基本用法

當(dāng)遍歷一個數(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)絡(luò)安全公司Cylance'},
  {title: '如何看待阿里巴巴開酒店這件事？'}
  ]
 }
 });
</script>

效果：

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

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

html：

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

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

html：

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

效果：

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

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

這些方法會改變原數(shù)組，所以又稱為變異方法。

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

js：

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

效果：

也有一些非變異方法，它們不會改變原數(shù)組，只會返回新數(shù)組：

filter()
concat()
slice()

我們在使用這些方法時，可以通過設(shè)置新數(shù)組的方式來更新視圖。

js：

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

效果：

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

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

注意：通過以下方法來改變數(shù)組， Vue.js 是無法檢測的，所以不會更新視圖：

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

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

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

效果：

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

//通過 splice 的設(shè)置索引方式來更新數(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>過濾出帶“美元”的標(biāo)題</h3>
 <ul>
 <li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li>
 </ul>
 <h3>按照標(biāo)題長度，由短到長排序</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)絡(luò)安全公司Cylance'},
  {title: '如何看待XXX開酒店賺美元這件事？'}
  ]
 },
 computed: {
  //過濾出帶“美元”的標(biāo)題
  filterNews: function () {
  return this.news.filter(function (item) {
   return item.title.match(/美元/);
  })
  },
  //按照標(biāo)題長度，由短到長排序
  sortNews: function () {
  return this.news.sort(function (val1, val2) {
   if(val1.title.length < val2.title.length){
   return -1;
   }
  })
  }
 }
 });
</script>

效果（ demo ）：