快捷導(dǎo)航

Vue列表渲染的示例代碼

更新時間：2018年11月01日 11:56:49 作者：fsrookie

這篇文章主要介紹了Vue列表渲染的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

用v-for把一個數(shù)組對應(yīng)為一個組件元素

我們用v-for指令根據(jù)一組數(shù)組的選項列表進行渲染。v-for指令需要使用item in items形式的語法：

<ul>
 <li v-for="item in items">
  {{ item.message }}
 </li>
</ul>

var vm = new Vue({
 el: '#el',
 data: {
  items: [
   {message: 'foo'},
   {message: 'boar'}
  ]
 }
})

在v-for塊中，我們擁有對父作用域?qū)傩缘耐耆L問權(quán)限。v-for還支持一個可選的第二個參數(shù)為當(dāng)前項的索引。

<ul>
 <li v-for="(item, index) in items">
  {{ item.message }} {{ index }}
 </li>
</ul>

var vm = new Vue({
 el: '#el',
 data: {
  items: [
   {message: 'foo'},
   {message: 'bar'}
  ]
 }
})

也可以用of替代in作為分隔符，因為它是最接近JavaScript迭代器的語法：

<div v-for="item of items"></div>

一個對象的v-for

也可以使用v-for通過對一個對象的屬性迭代。

new Vue({
 el: '#el',
 data: {
  object: {
   firstName: 'h',
   lastName: 'z',
   age: 26
  }
 }
})

<ul id="v-for-object" class="demo">
 <li v-for="value on object">
  {{ value }}
 /li>
</ul>

也可以提供第二個參數(shù)為名：

<div v-for="(value, key) in object">
 {{ key }} : {{ value }}
</div>

第三個參數(shù)為索引：

<div v-for="(value, key, index) in object">
 {{index}}. {{key}}: {{value}}
</div>

Key

當(dāng)Vue使用v-for正在更新已渲染過的元素列表時，它默認(rèn)就地復(fù)用。如果數(shù)據(jù)項的順序被改變，Vue將不會移動DOM元素來匹配數(shù)據(jù)項的順序，而是簡單的復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。

這個默認(rèn)的模式是高效的，但只適用于不依賴子組件狀態(tài)或零時DOM狀態(tài)的列表渲染輸出。

為了給Vue一個提示，以便追蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一key屬性。理想的key值是每項都有唯一id。它的工作方式類似于一個屬性，所以你需要用v-bind來綁定動態(tài)值：

<div v-for="item in items" :key="item.id">
</div>

建議盡可能在使用v-for時提供key，除非遍歷輸出的DOM內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上提升。

數(shù)組更新檢測

(1)變異方法

Vue包含一組觀察數(shù)組的變異方法，所以它們也將會觸發(fā)視圖更新。這些方法如下：

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

(2)替換數(shù)組

變異方法，是會改變被這些方法調(diào)用的原始數(shù)組。相比之下也有非變異方法：

filter()
concat()
slice()

這些方法不會改變原始數(shù)組，但是總會返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組:

ex.items = ex.items.filter(function(item) {
 return item.message.match(/Foo/)
})

你可能認(rèn)為這將導(dǎo)致Vue丟棄現(xiàn)有DOM并重新渲染整個列表。Vue為了使得DOM得到最大范圍的重用而實現(xiàn)了一些智能的、啟發(fā)式的方法，所以用一個含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。

注意事項

由于JavaScript的限制，Vue補鞥呢檢測以下變動的數(shù)組：

1. 當(dāng)你用索引直接設(shè)置一個項的時候：vm.items[indexOfItem] = newValue
2. 當(dāng)你修改數(shù)組的長度時，例如：vm.items.length = newLenth

舉個例子：

var vm = new Vue({
 data: {
  items: ['a','b','c']
 }
})
vm.items[1] = 'x' //不是響應(yīng)式的
vm.items.length = 2// 不是響應(yīng)式的

為了解決第一類問題，以下兩種方式都可以實現(xiàn)vm.items[i] = newVal相同的效果，同時也會觸發(fā)響應(yīng)式更新：

//Vue.set
Vue.set(vm.items, i, newVal)

//Array.prototype.splice
vm.items.splice(i, 1, newVal)

也可以使用vm.$set實例方法，該方法是全局方法Vue.set的一個別名：

vm.$set(vm.items, i, newVal)

為了解決第二類問題，可以使用splice:

vm.items.splice(newLenght)

對象更改檢測注意事項

由于JavaScript的限制，Vue不能檢測對象屬性的添加或刪除：

var vm = new Vue({
 data: {
  a: 1
 }
})
//vm.a是響應(yīng)式的
//vm.b不是響應(yīng)式的

對于已經(jīng)創(chuàng)建的實例，Vue不能動態(tài)添加根級別的響應(yīng)式屬性，但是可以通過Vue.set(obj,key,value)方法向嵌套對象添加響應(yīng)式屬性。

var vm = new Vue({
 data: {
  userProfile: {
   name: 'Anika'
  }
 }
})

你可以添加一個新age屬性嵌套的userProfile對象：

Vue.set(vm.userProfile, 'age', 27)

還可以使用vm.$set實例方法，它只是全局Vu.set的別名：

vm.$set(vm.userProfile, 'age', 27)

有事可能需要為已有對象賦予多個新屬性，所以，如果你想添加新的響應(yīng)式屬性：

vm.userProfile = Object.assign({}, vm.userProfile, {
 age: 27,
 favoriteColor: 'vue green'
})

顯示過濾/排序結(jié)果

有時我們想要顯示一個數(shù)組的過濾或者排序副本，而不是實際改變原始值，我們可以創(chuàng)建返回過濾或排序數(shù)組的計算屬性：

<li v-for="n in evenNubers">{{ n }}</li>

data: {
 number: [1,2,3,4,5]
},
computed: {
 evenNubers:function() {
  return this.number.reverse()
 }
}

在計算屬性不適用的情況下，可以使用method方法。

一段取值范圍的v-for

v-for也可以取整數(shù)。在這種情況下，它將重復(fù)多次模板。

<div>
 <span v-for="n in 10">{{ n }}</span>
</div>

v-for on a <template>

類似于v-if，你也可以利用帶有v-for的<template>渲染多個元素。比如：

<ul>
 <template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider" role="presentation"></li>
 </template>
</ul>

v-for with v-if

當(dāng)它們處于同一節(jié)點，v-for的優(yōu)先級比v-if更高，這意味著v-if將分別重復(fù)運行于每個v-for循環(huán)中。當(dāng)你想僅有的一些項渲染節(jié)點時，這種優(yōu)先級的機制會十分有用：

<li v-for="todo in todos" v-if="!todo.isComplete">
 {{ todo }}
</li>

一個組件的v-for

在自定義組件里，你可以像任何普通元素一樣用v-for:

<my-component v-for="item in items" :key="item.id"></my-component>
在2.2.0+版本里面。當(dāng)組件中使用v-for時，key現(xiàn)在是必須的。

然而，任何數(shù)據(jù)都不會自動傳遞到組件中，因為組件有自己的獨立作用域，為了把迭代數(shù)據(jù)傳遞到組件里，我們要用props：

<my-component
 v-for="(item, index) in items"
 :item="item"
 :index="index"
 ：key="item.id"
></my-component>

不自動將item注入到原組件里的原因是這會使得組件與v-for的運作耦合，明確組件數(shù)據(jù)的來源能夠使組件在其他場合重復(fù)使用。

示例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>07vue列表渲染</title>
 <script src="./vue.js"></script>
 <script>
  window.onload = function(){
   var vm = new Vue({
    el:'.box',
    data:{
     dataList:['a','b','c','d','e','f'],
     newObj:{
      "name":"lucy",
      "age":18
     },
     objDataList:[
     {
      "name":"genery",
      "age":18
     },
     {
      "name":"bulse",
      "age":20
     },
     {
      "name":"naev",
      "age":23
     }
 
     ]
    }
   })
 
  }
 </script>
</head>
<body>
 <div class="box">
  <ul>
 
  <!-- v-for 列表數(shù)據(jù) -->
  <li v-for="(item,index) in dataList">{{index}}---{{item}}</li>
  <li v-for="item in dataList">{{item}}</li>
 
  <!-- 對象 -->
  <li v-for="(value,key) in newObj">{{key}}-------{{value}}</li>
  <li v-for="value in newObj">{{value}}</li>
  <!-- 字典形式 -->
  <li v-for="datadict in objDataList">{{datadict}}</li>
  <li v-for="datadict in objDataList">{{datadict.name}}</li>
  <li v-for="datadict in objDataList">{{datadict.age}}</li>
  </ul>
  <div v-for="item in dataList">div: {{item}}</div>
 </div>
</body>
</html>

vue的列表渲染其實就是通過指令v-for可以將一組數(shù)據(jù)渲染到頁面中,這一組數(shù)據(jù)可以是數(shù)組抑或是對象,v-for指令需要使用item in items形式的特殊語法,items是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。

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

您可能感興趣的文章: