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

v-for可以把數(shù)據(jù)中的一個(gè)數(shù)組對(duì)應(yīng)為一組元素
v-for 指令需要以 item in items 形式的特殊語(yǔ)法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。

{{item.text}}

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

輸出HTML

第一組
第二組
第三組

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

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

輸出HTML

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

你也可以用 of 替代 in 作為分隔符，因?yàn)樗亲罱咏?JavaScript 迭代器的語(yǔ)法：

    {{ item.text }}

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

    {{item}}

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

輸出HTML

第一組
第二組
第三組

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

    {{key}} : {{item}}

輸出HTML

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

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

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

輸出HTML

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

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

這個(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è)特殊的屬性相當(dāng)于 Vue 1.x 的 track-by ，但它的工作方式類似于一個(gè)屬性，所以你需要用 v-bind 來綁定動(dòng)態(tài)值（在這里使用簡(jiǎn)寫）：

建議盡可能使用 v-for 來提供 key ，除非 DOM 內(nèi)容遍歷起來非常簡(jiǎn)單，或者你是有意識(shí)的要依賴于默認(rèn)行為以便獲得性能提升。
因?yàn)樗?Vue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制， key 并不特別與 v-for 關(guān)聯(lián)，key 還具有其他用途，我們將在后面的指南中看到其他用途。

2.2.0+ 的版本里，當(dāng)在組件中使用 v-for 時(shí)，key 現(xiàn)在是必須的。

在自定義組件里，你可以像任何普通元素一樣用 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},   
        ]  
    }   
})

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

但是我們又如何將數(shù)據(jù)渲染到我們的組件中呢？現(xiàn)在我們就需要綁定一個(gè)屬性，屬性需要在組件中注冊(cè)

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 >標(biāo)簽。例如:

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

輸出HTML

1
2
3

變異方法(mutation method)，顧名思義，會(huì)改變被這些方法調(diào)用的原始數(shù)組。

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

相非變異(non-mutating method)方法，例如： filter(), concat() 和 slice() 。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組：

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

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

由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength

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

example1.items.splice(newLength)

我們可以用以下三種方法對(duì)對(duì)象進(jìn)行更新：

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

Vue.set("目標(biāo)對(duì)象","屬性","值")
vm.$set("目標(biāo)對(duì)象","屬性","值")

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

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

this.userProfile   //對(duì)象本身的屬性

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

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

如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

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

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

{{ n }}

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

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

{{ n }}

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

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

    {{ n }} 

輸出HTML

1 2 3 4 5 6 7 8 9 10