vue里面的v-for列表循環

verano 發布于2019-08-20 19:05 / 402人閱讀

摘要：取到里面的偶數位的值在計算屬性不適用的情況下例如，在嵌套循環中你可以使用一個方法一段取值范圍的也可以取整數。

列表渲染 v-for

v-for可以把數據中的一個數組對應為一組元素
v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組并且 item 是數組元素迭代的別名。

{{item.text}}

data:{
    items:[
        {text:"第一組"}，
        {text:"第二組"}，
        {text:"第三組"}，
    ]
}

輸出HTML

第一組
第二組
第三組

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。 v-for 還支持一個可選的第二個參數為當前項的索引。


    {{ index }} - {{ item.text }}

輸出HTML

1 - 第一組
2 - 第二組
3 - 第三組

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


    {{ item.text }}

一個對象的 v-for

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


    {{item}}

data:{
    items:{
        text1:"第一組",
        text2:"第二組",
        text3:"第三組",
    }
}

輸出HTML

第一組
第二組
第三組

你也可以提供第二個的參數為鍵名：


    {{key}} : {{item}}

輸出HTML

text1 : 第一組
text2 : 第二組
text3 : 第三組

第三個參數為索引：


    {{index}} . {{key}} : {{item}}

輸出HTML

0 . text1 : 第一組
1 . text2 : 第二組
2 . text3 : 第三組

key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。如果數據項的順序被改變，Vue將不是移動 DOM 元素來匹配數據項的順序，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態（例如：表單輸入值）的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的且唯一的 id。這個特殊的屬性相當于 Vue 1.x 的 track-by ，但它的工作方式類似于一個屬性，所以你需要用 v-bind 來綁定動態值（在這里使用簡寫）：

建議盡可能使用 v-for 來提供 key ，除非 DOM 內容遍歷起來非常簡單，或者你是有意識的要依賴于默認行為以便獲得性能提升。
因為它是 Vue 識別節點的一個通用機制， key 并不特別與 v-for 關聯，key 還具有其他用途，我們將在后面的指南中看到其他用途。

一個組件的v-for

2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的。

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

Vue.component("mycom", {
  template: "瘋狂的石頭"
})
var vm = new Vue({
    el:"#box",
    data:{
        todo:[
            {text:1,ok:true},
            {text:2,ok:false},
            {text:3,ok:true},   
        ]  
    }   
})

瘋狂的石頭
瘋狂的石頭
瘋狂的石頭

但是我們又如何將數據渲染到我們的組件中呢？現在我們就需要綁定一個屬性，屬性需要在組件中注冊

Vue.component("mycom", {
  template: "瘋狂的石頭{{this.lie}}",
  props:["lie"]
})
var vm = new Vue({
    el:"#box",
    data:{
        todo:[
            {text:1,ok:true},
            {text:2,ok:false},
            {text:3,ok:true},   
        ]  
    }   
})

輸出HTML

瘋狂的石頭1
瘋狂的石頭2
瘋狂的石頭3

v-for 與 < template >

我們也可以使用 v-for 來渲染 < template >標簽。例如:

data:{
    todo:[
        {text:1,ok:true},
        {text:2,ok:false},
        {text:3,ok:true},   
    ]  
}

輸出HTML

1
2
3

數組更新檢測 變異方法

變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數組。

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非變異方法

相非變異(non-mutating method)方法，例如： filter(), concat() 和 slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：

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

你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。 Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的、啟發式的方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

注意事項

由于 JavaScript 的限制， Vue 不能檢測以下變動的數組：

當你利用索引直接設置一個項時，例如： vm.items[indexOfItem] = newValue

當你修改數組的長度時，例如： vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

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

example1.items.splice(newLength)

對象更新檢測

我們可以用以下三種方法對對象進行更新：

如果你需要為對象屬性之中添加新的屬性，那么我么你可以利用以下兩種方法

Vue.set("目標對象","屬性","值")
vm.$set("目標對象","屬性","值")

如果我們想更新對象中的屬性，以下這種方法可以滿足你

this.userProfile = Object.assign({}, this.userProfile, {
    age: 27,
    favoriteColor: "Vue Green"
})

this.userProfile   //對象本身的屬性

Object.assign()    //es6新增加的方法，用來將源對象的所有可枚舉屬性，復制到目標對象。它至少需要兩個對象作為參數，第一個參數是目標對象，后面的參數都是源對象

{}                 //你需要增加的屬性

如果目標對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。

注意！我們不更改根屬性的屬性，只能更改跟屬性以下的子屬性的屬性

顯示過濾 / 排序結果

有時，我們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種情況下，可以創建返回過濾或排序數組的計算屬性。


{{ n }}

data: {
    numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
    evenNumbers: function () {
        return this.numbers.filter(function (number) {
        return number % 2 === 0
        })
    }
}

在計算屬性不適用的情況下 (例如，在嵌套 v-for 循環中) 你可以使用一個 method 方法：

{{ n }}

data: {
    numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
    even: function (numbers) {
        return numbers.filter(function (number) {
        return number % 2 === 0
        })
    }
}

一段取值范圍的 v-for

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


    {{ n }}

輸出HTML

1 2 3 4 5 6 7 8 9 10

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85124.html

Vue 2 | Part 5 列表渲染和事件監聽

之前在vue里面綁定數據，都只是單個地綁定。這期我們來看一下怎樣渲染列表，然后通過事件監聽方法往列表里面增加item。列表渲染廢話不多說，直接上代碼： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

Nekron 2019-08-20 13:55 評論0 收藏0
Vue 的條件渲染和列表渲染

摘要：條件渲染上一篇與綁定下一篇的事件處理方法在中配合渲染一整組在使用控制元素的時候，我們需要將它添加到這個元素上去。最終的渲染結果不會包含元素。渲染如下列表渲染使用把一個數組對應為一組元素我們用指令根據一組數組的選項列表進行渲染。條件渲染上一篇：Class 與 Style 綁定：https://segmentfault.com/a/11...下一篇：Vue的事件處理方法：https:/...

go4it 2019-08-20 19:06 評論0 收藏0
vue從創建到完整的餓了么（5）v-for，v-bind與計算屬性

摘要：的命令都用來開頭。用來綁定屬性。排序思路重新創建一個，鍵名是從到，鍵值就是獲取的數據的鍵值。計算函數寫在哪一種方法是寫在生命周期的數據請求里，直接返回一個處理好的，但咱們用另一種方法計算屬性。把這個加到城市名字的上即可解決。說明 1.上一章--Home.vue及vue-resource使用2.cangdu大神的項目源碼地址--Github地址3.接口地址--Github地址4.UI框...

james 2019-08-20 18:58 評論0 收藏0
Vue 列表渲染

摘要：列表渲染用把一個數組對應為一組元素我們用指令根據一組數組的選項列表進行渲染。你也可以用替代作為分隔符把對象屬性渲染列表你也可以提供第二個的參數為鍵名第三個參數為索引渲染組件列表自定義組件里，你可以像任何普通元素一樣用。列表渲染用v-for把一個數組對應為一組元素我們用 v-for 指令根據一組數組的選項列表進行渲染。 v-for 指令需要以 item in items 形式的特殊...

ChanceWong 2019-08-20 19:06 評論0 收藏0
Vue.js第五課循環語句

摘要：循環使用指令。指令需要以形式的特殊語法，是源數據數組并且是數組元素迭代的別名。循環使用 v-for 指令。 v-for 指令需要以 item in items 形式的特殊語法， items 是源數據數組并且 item 是數組元素迭代的別名。 v-for 可以綁定數據到數組來渲染一個列表：v-for 指令 {{ site.name }} new Vue({ el: #a...

plus2047 2019-06-27 16:34 評論0 收藏0