搜尋

首頁  >  文章  >  web前端  >  Vue.JS入門教學之列表渲染

Vue.JS入門教學之列表渲染

高洛峰
高洛峰原創
2016-12-03 10:30:151322瀏覽

你可以使用 v-repeat 指令來基於 ViewModel 上的物件陣列渲染列表。對於數組中的每個對象，該指令將建立一個以該對像作為其 $data 對象的子 Vue 實例。這些子實例繼承父實例的資料作用域，因此在重複的範本元素中你既可以存取子實例的屬性，也可以存取父實例的屬性。此外,你也可以透過 $index 屬性來取得目前實例對應的陣列索引。 

<ul id="demo">
 <li v-repeat="items" class="item-{{$index}}">
 {{$index}} - {{parentMsg}} {{childMsg}}
 </li>
</ul>
var demo = new Vue({
 el: &#39;#demo&#39;,
 data: {
 parentMsg: &#39;Hello&#39;,
 items: [
  { childMsg: &#39;Foo&#39; },
  { childMsg: &#39;Bar&#39; }
 ]
 }
})

   

查看一下效果，應該很容易得到結果

塊級重複

有時我們可能需要重複一個包含多個節點的塊，這時可以用 

<ul>
 <template v-repeat="list">
 <li>{{msg}}</li>
 <li class="divider"></li>
 </template>
</ul>

   

簡單值陣列

簡單值 (primitive value) 即字串、數字、boolean 等並非物件的值。對於包含簡單值的數組，你可用$value 直接存取值:

<ul id="tags">
 <li v-repeat="tags">
 {{$value}}
 </li>
</ul>

    

new Vue({
 el: &#39;#tags&#39;,
 data: {
 tags: [&#39;JavaScript&#39;, &#39;MVVM&#39;, &#39;Vue.js&#39;]
 }
})

   

使用別名
有時我們可能想要更明確地存取


使用別名

有時我們可能想要更明確地存取

的隱名符號父作用域。你可以透過提供一個參數給v-repeat 指令並用它作為將被迭代項的別名:

<ul id="users">
 <li v-repeat="user : users">
  {{user.name}} - {{user.email}}
 </li>
</ul>

var users = new Vue({
 el: &#39;#users&#39;,
 data: {
  users: [
   { name: &#39;Foo Bar&#39;, email: &#39;foo@bar.com&#39; },
   { name: &#39;John Doh&#39;, email: &#39;john@doh.com&#39; }
  ]
 }
});

   

變異方法

Vue.js包括push(), pop(), shift(), unshift(), splice(), sort() 和reverse()) 進行了攔截，因此呼叫這些方法也將自動觸發視圖更新。 

// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: &#39;Baz&#39; })
demo.items.pop()

   

下面是一個示範的例子，點擊按鈕的時候資料項目會移除

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
 <ul id="tags">
  <li v-repeat="tags">
   {{$value}}
  </li>
 </ul>
 
 <input type="button" value="测试" onclick="myClick();">
<script>
 var tag = new Vue({
  el: &#39;#tags&#39;,
  data: {
   tags: [&#39;标签一&#39;, &#39;标签二&#39;, &#39;标签三&#39;]
  }
 });
 
 function myClick(){
  tag.tags.pop();
 }
</script>
</body>
</html>

   

set () 和$remove() 。

你應該避免直接透過索引來設定資料綁定數組中的元素，例如 demo.items[0] = {}，因為這些改動是無法被 Vue.js 偵測到的。你應該使用擴充的 $set() 方法:

// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: &#39;Changed!&#39;})

   


$remove() 只是 splice()方法的語法糖。它將移除給定索引處的元素。當參數不是數值時，$remove() 將在陣列中搜尋該值並刪除第一個發現的對應元素。 

// 删除索引为 0 的元素。
demo.items.$remove(0)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
 <ul id="tags">
  <li v-repeat="tags">
   {{$value}}
  </li>
 </ul>
 
 <input type="button" value="测试" onclick="myClick();">
<script>
 var tag = new Vue({
  el: &#39;#tags&#39;,
  data: {
   tags: [&#39;标签一&#39;, &#39;标签二&#39;, &#39;标签三&#39;]
  }
 });
 
 function myClick(){
  //tag.tags.pop();
  //tag.tags[0] = &#39;修改后的内容不生效&#39;;
  tag.tags.$set(0, &#39;修改后的内容生效&#39;);
  tag.tags.$remove(1);
 }
</script>
</body>
</html>

   

替換陣列

當你使用非變異方法，例如filter(), concat() 或 slice()，傳回的陣列將是一個不同的實例。在此情況下，你可以用新陣列取代舊的陣列:

demo.items = demo.items.filter(function (item) {
 return item.childMsg.match(/Hello/)
})

   



你可能會認為這將導致整個清單的 DOM 被銷毀並重新渲染。但別擔心，Vue.js 能夠辨識一個陣列元素是否已有關聯的 Vue 實例， 並盡可能地進行有效重複使用。

使用track-by（vue中track-by屬性）

在某些情況下，你可能需要以全新的物件（例如 API 呼叫所傳回的物件）去替換陣列。如果你的每一個資料物件都有一個唯一的 id 屬性，那麼你可以使用 track-by 特性參數給 Vue.js 一個提示，這樣它就可以重複使用已有的具有相同 id 的 Vue 實例和 DOM 節點。

例如：你的資料是這個樣子的

{
 items: [
 { _uid: &#39;88f869d&#39;, ... },
 { _uid: &#39;7496c10&#39;, ... }
 ]
}

   

那麼你可以像這樣給予提示:

<div v-repeat="items" track-by="_uid">
 <!-- content -->
</div>

   

_m裡
'88f869d' 的新對象，它就會知道可以直接重複使用有同樣_uid 的已有實例。在使用全新資料重新渲染大型 v-repeat 清單時，合理使用 track-by 能大幅提升效能。

遍歷物件

你也可以使用 v-repeat 遍歷一個物件的所有屬性。每個重複的實例會有一個特殊的屬性 $key。對於簡單值，你也可以像存取數組中的簡單值那樣使用 $value 屬性。 

<ul id="repeat-object">
 <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
 <li>===</li>
 <li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>

   

new Vue({
 el: &#39;#repeat-object&#39;,
 data: {
  primitiveValues: {
   FirstName: &#39;John&#39;,
   LastName: &#39;Doe&#39;,
   Age: 30
  },
  objectValues: {
   one: {
    msg: &#39;Hello&#39;
   },
   two: {
    msg: &#39;Bye&#39;
   }
  }
 }
});

   


在 ECMAScript 5 中，對於新增一個屬性，或為物件中刪除一個屬性時，沒有機制可以偵測到這兩種情況。針對這個問題，Vue.js 中的被觀察對象會被加入三個擴充方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以用於在新增 / 刪除觀察對象的屬性時觸發對應的視圖更新。方法 $add 和 $set 的不同之處在於當指定的鍵已經在物件中存在時 $add 將提前返回，所以調用 obj.$add(key) 並不會以 undefined 覆蓋已有的值。

迭代值域

v-repeat 也可以接受一個整數。在這種情況下，它將重複顯示一個模板多次。下面的例子將會迭代3次。 

<div id="range">
 <div v-repeat="val">Hi! {{$index}}</div>
</div>

    

new Vue({
 el: &#39;#range&#39;,
 data: {
  val: 3
 }
});

   


數組過濾器

有時我們只需要顯示一個陣列的過濾或排序的版本，而不需要實際重置或原始資料。 Vue 提供了兩個內建的過濾器來簡化此類需求： filterBy 和 orderBy。 🎜
<input v-model="searchText">
<ul>
 <li v-repeat="users | filterBy searchText">{{name}}</li>
</ul>
🎜  🎜

以上就是本文的全部內容，希望對大家的學習有幫助


陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Vue.JS入門教程之事件監聽下一篇：Vue.JS入門教程之事件監聽

相關文章

看更多