快捷導(dǎo)航

Vue列表渲染的示例代碼

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

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

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

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

<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塊中，我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限。v-for還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xià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作為分隔符，因?yàn)樗亲罱咏麶avaScript迭代器的語(yǔ)法：

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

一個(gè)對(duì)象的v-for

也可以使用v-for通過(guò)對(duì)一個(gè)對(duì)象的屬性迭代。

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>

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

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

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

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

Key

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

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

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

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

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

數(shù)組更新檢測(cè)

(1)變異方法

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

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

(2)替換數(shù)組

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

filter()
concat()
slice()

這些方法不會(huì)改變?cè)紨?shù)組，但是總會(huì)返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組:

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

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

注意事項(xiàng)

由于JavaScript的限制，Vue補(bǔ)鞥呢檢測(cè)以下變動(dòng)的數(shù)組：

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

舉個(gè)例子：

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

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

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

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

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

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

為了解決第二類問(wèn)題，可以使用splice:

vm.items.splice(newLenght)

對(duì)象更改檢測(cè)注意事項(xiàng)

由于JavaScript的限制，Vue不能檢測(cè)對(duì)象屬性的添加或刪除：

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

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

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

你可以添加一個(gè)新age屬性嵌套的userProfile對(duì)象：

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

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

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

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

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

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

有時(shí)我們想要顯示一個(gè)數(shù)組的過(guò)濾或者排序副本，而不是實(shí)際改變?cè)贾?，我們可以?chuàng)建返回過(guò)濾或排序數(shù)組的計(jì)算屬性：

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

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

在計(jì)算屬性不適用的情況下，可以使用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>渲染多個(gè)元素。比如：

<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é)點(diǎn)，v-for的優(yōu)先級(jí)比v-if更高，這意味著v-if將分別重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中。當(dāng)你想僅有的一些項(xiàng)渲染節(jié)點(diǎn)時(shí)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用：

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

一個(gè)組件的v-for

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

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

然而，任何數(shù)據(jù)都不會(huì)自動(dòng)傳遞到組件中，因?yàn)榻M件有自己的獨(dú)立作用域，為了把迭代數(shù)據(jù)傳遞到組件里，我們要用props：

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

不自動(dòng)將item注入到原組件里的原因是這會(huì)使得組件與v-for的運(yùn)作耦合，明確組件數(shù)據(jù)的來(lái)源能夠使組件在其他場(chǎng)合重復(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>
 
  <!-- 對(duì)象 -->
  <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的列表渲染其實(shí)就是通過(guò)指令v-for可以將一組數(shù)據(jù)渲染到頁(yè)面中,這一組數(shù)據(jù)可以是數(shù)組抑或是對(duì)象,v-for指令需要使用item in items形式的特殊語(yǔ)法,items是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。

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

您可能感興趣的文章: