欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年12月01日 10:17:06   作者：hutou  
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之列表渲染,具有一定的參考價值，感興趣的小伙伴們可以參考一下

你可以使用 v-repeat 指令來基于 ViewModel 上的對象數(shù)組渲染列表。對于數(shù)組中的每個對象，該指令將創(chuàng)建一個以該對象作為其 $data 對象的子 Vue 實例。這些子實例繼承父實例的數(shù)據(jù)作用域，因此在重復(fù)的模板元素中你既可以訪問子實例的屬性，也可以訪問父實例的屬性。此外,你還可以通過 $index 屬性來獲取當(dāng)前實例對應(yīng)的數(shù)組索引。

 <ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
  {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
 </ul>

 var demo = new Vue({
  el: '#demo',
  data: {
  parentMsg: 'Hello',
  items: [
   { childMsg: 'Foo' },
   { childMsg: 'Bar' }
  ]
  }
 })

查看一下效果，應(yīng)該很容易得到結(jié)果

塊級重復(fù)

有時我們可能需要重復(fù)一個包含多個節(jié)點的塊，這時可以用 <template> 標(biāo)簽包裹這個塊。這里的 <template> 標(biāo)簽只起到語義上的包裹作用，其本身不會被渲染出來。例如：

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

簡單值數(shù)組

簡單值 (primitive value) 即字符串、數(shù)字、boolean 等并非對象的值。對于包含簡單值的數(shù)組，你可用 $value 直接訪問值:

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

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

使用別名
有時我們可能想要更明確地訪問當(dāng)前作用域的變量而不是隱式地回退到父作用域。你可以通過提供一個參數(shù)給 v-repeat 指令并用它作為將被迭代項的別名:

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

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

變異方法
Vue.js 內(nèi)部對被觀察數(shù)組的變異方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 進(jìn)行了攔截，因此調(diào)用這些方法也將自動觸發(fā)視圖更新。

// 以下操作會觸發(fā) DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()

下面是一個演示的例子，點擊按鈕的時候數(shù)據(jù)項會被移除

 <!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: '#tags',
   data: {
    tags: ['標(biāo)簽一', '標(biāo)簽二', '標(biāo)簽三']
   }
  });

  function myClick(){
   tag.tags.pop();
  }
 </script>
 </body>
 </html>

擴(kuò)展方法
Vue.js 給被觀察數(shù)組添加了兩個便捷方法：$set() 和 $remove() 。
你應(yīng)該避免直接通過索引來設(shè)置數(shù)據(jù)綁定數(shù)組中的元素，比如 demo.items[0] = {}，因為這些改動是無法被 Vue.js 偵測到的。你應(yīng)該使用擴(kuò)展的 $set() 方法:

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

$remove() 只是 splice()方法的語法糖。它將移除給定索引處的元素。當(dāng)參數(shù)不是數(shù)值時，$remove() 將在數(shù)組中搜索該值并刪除第一個發(fā)現(xiàn)的對應(yīng)元素。

// 刪除索引為 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: '#tags',
  data: {
   tags: ['標(biāo)簽一', '標(biāo)簽二', '標(biāo)簽三']
  }
 });

 function myClick(){
  //tag.tags.pop();
  //tag.tags[0] = '修改后的內(nèi)容不生效';
  tag.tags.$set(0, '修改后的內(nèi)容生效');
  tag.tags.$remove(1);
 }
</script>
</body>
</html>

替換數(shù)組
當(dāng)你使用非變異方法，比如filter(), concat() 或 slice()，返回的數(shù)組將是一個不同的實例。在此情況下，你可以用新數(shù)組替換舊的數(shù)組:

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

你可能會認(rèn)為這將導(dǎo)致整個列表的 DOM 被銷毀并重新渲染。但別擔(dān)心，Vue.js 能夠識別一個數(shù)組元素是否已有關(guān)聯(lián)的 Vue 實例， 并盡可能地進(jìn)行有效復(fù)用。

使用track-by（vue中track-by屬性）
在某些情況下，你可能需要以全新的對象（比如 API 調(diào)用所返回的對象）去替換數(shù)組。如果你的每一個數(shù)據(jù)對象都有一個唯一的 id 屬性，那么你可以使用 track-by 特性參數(shù)給 Vue.js 一個提示，這樣它就可以復(fù)用已有的具有相同 id 的 Vue 實例和 DOM 節(jié)點。
例如：你的數(shù)據(jù)是這個樣子的

{
 items: [
 { _uid: '88f869d', ... },
 { _uid: '7496c10', ... }
 ]
}

那么你可以像這樣給出提示:

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

在替換 items 數(shù)組時，Vue.js 如果碰到一個有 _uid: '88f869d' 的新對象，它就會知道可以直接復(fù)用有同樣 _uid 的已有實例。在使用全新數(shù)據(jù)重新渲染大型 v-repeat 列表時，合理使用 track-by 能極大地提升性能。

遍歷對象
你也可以使用 v-repeat 遍歷一個對象的所有屬性。每個重復(fù)的實例會有一個特殊的屬性 $key。對于簡單值，你也可以象訪問數(shù)組中的簡單值那樣使用 $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: '#repeat-object',
  data: {
   primitiveValues: {
    FirstName: 'John',
    LastName: 'Doe',
    Age: 30
   },
   objectValues: {
    one: {
     msg: 'Hello'
    },
    two: {
     msg: 'Bye'
    }
   }
  }
 });

在 ECMAScript 5 中，對于給對象添加一個新屬性，或是從對象中刪除一個屬性時，沒有機(jī)制可以檢測到這兩種情況。針對這個問題，Vue.js 中的被觀察對象會被添加三個擴(kuò)展方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以被用于在添加 / 刪除觀察對象的屬性時觸發(fā)對應(yīng)的視圖更新。方法 $add 和 $set 的不同之處在于當(dāng)指定的鍵已經(jīng)在對象中存在時 $add 將提前返回，所以調(diào)用 obj.$add(key) 并不會以 undefined 覆蓋已有的值。

迭代值域
v-repeat 也可以接受一個整數(shù)。在這種情況下，它將重復(fù)顯示一個模板多次。下面的例子將迭代3次。

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

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

數(shù)組過濾器
有時候我們只需要顯示一個數(shù)組的過濾或排序過的版本，而不需要實際改變或重置原始數(shù)據(jù)。Vue 提供了兩個內(nèi)置的過濾器來簡化此類需求： filterBy 和 orderBy。

<input v-model="searchText">
<ul>
 <li v-repeat="users | filterBy searchText">{{name}}</li>
</ul>

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論