其中我們也可以把in換成of作為分隔符，因為它是最接近JavaScript迭代器的語法。

v-for的默認(rèn)行為試著不改變整體，而是替換元素。迫使其重新排序的元素，你需要提供一個key的特殊屬性：

 {{ item.text }}

接下來，我們看看v-for的一些使用場景。

一個數(shù)組的 v-for

使用v-for指令把數(shù)組的選項列表進(jìn)行渲染。v-for指令需要使用item in items形式的特殊語法，items是源數(shù)據(jù)數(shù)組，item是數(shù)組元素迭代的別名。來看一個簡單的示例：

    {{ item }}


// JavaScript
var app = new Vue({
    el: '#app',
    data: {
        items: [1, 34, 89, 92, 45, 76, 33]
    }
})

這個時候，數(shù)組items的每個item渲染到對應(yīng)的li中，在瀏覽器看到的效果如下：

上面的例子是通過v-for把數(shù)組items的每個項迭代出來放到li中，除此之外，還可以把數(shù)組的每個index也遍歷出來。在上面的代碼的基礎(chǔ)上，咱們修改一下模板：

    index-{{ index }}: {{ item }}

這個時候數(shù)組的索引號也遍歷出來了：

從上面的示列看出來了，你需要哪個元素（HTML的標(biāo)簽）循環(huán)，那么v-for就寫在那個元素上。

上面我們已經(jīng)可以正常的使用v-for將定義的數(shù)組每一項輸出來。為了加深學(xué)習(xí)，咱們在上面的示例基礎(chǔ)上增加一項需求，就是對輸出的數(shù)組進(jìn)行排序。這個時候，咱們需要使用到Vue中的computed屬性。

在Vue中，我們不能污染源數(shù)據(jù)，如果我們直接對源數(shù)據(jù)items通過sort()方法進(jìn)行排序，將會報錯的：

var app = new Vue({
    el: '#app',
    computed: {
        items: function() {
            return this.items.sort()
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 33]
    }
})

為了不會污染Vue中的源數(shù)據(jù)，需要在computed里重新聲明一個對象，比如聲明一個sortItems對象：

var app = new Vue({
    el: '#app',
    computed: {
        sortItems: function() {
            return this.items.sort()
        }
    },
    data: {
        items: [1, 34, 89, 92, 45, 76, 3, 12]
    }
})

這個時候，我們的模板也需要做對應(yīng)的修改：

    {{ item }}

如果不出意外的話，你看到的效果將是這樣的：

雖然有變化了，但不是我們想要的排序結(jié)果。雖然結(jié)果不是我們想要的，但這并不是Vue自身的問題，在JavaScript中也是這樣。如果我們要想真正的實現(xiàn)一個排序效果，那么需要添加一個JavaScript的數(shù)組的排序函數(shù)的功能：

function sortNumber(a, b) {
    return a - b
}

把computed里的代碼也做一個相應(yīng)的修改：

computed: {
    sortItems: function() {
        return this.items.sort(sortNumber)
    }
}

這相輸出的效果才真正的是一個正確的排序效果：

上面的例子，我們看到的是是一個簡單的純數(shù)字之類的數(shù)組，其其數(shù)組中的每個項也可以是對象，比如：

data: {
    objItems: [
        {
            firstName: 'Jack',
            lastName: 'Li',
            age: 34
        },
        {
            firstName: 'Airen',
            lastName: 'Liao',
            age: 18
        }
    ]
}

我們把模板換成：

 {{ objItem.firstName }} {{objItem.lastName}} is {{ objItem.age}} years old!

這個時候看到的效果如下：

在JavaScript中，我們有很多數(shù)組的方法，可以對數(shù)組進(jìn)行操作，這些方法可以修改一個數(shù)組。其實，在Vue中同樣包含一組觀察數(shù)組變異方法，這些方法將會觸發(fā)元素的重新更新（視圖更新），這些方法也是JavaScript中數(shù)組中?？吹降姆椒ǎ?code>push()、pop()、shift()、unshift()、splice()、sort()、reverse()。我們可以在控制臺中簡單的看一下前面的示例中items數(shù)組調(diào)用變異方法的效果：

Vue不但提供了數(shù)組變異的方法，還提供了替換數(shù)組的方法。變異方法可以通過些方法的調(diào)用修改源數(shù)據(jù)中的數(shù)組；除此之外也有對應(yīng)的非變異方法，比如filter()、concat()和slice()等。這些方法是不會改變源數(shù)據(jù)中的原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用這些方法時，可以用新數(shù)組替換舊數(shù)組。

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

• 當(dāng)你利用索引直接設(shè)置一個項時，例如app.items[indexOfItem] = newValue

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

為了解決第一類問題，以下兩種方式都可以實現(xiàn)和app.items[indexOfItem = newValue相同的效果，同時也將觸發(fā)狀態(tài)更新：

Vue.set(app.items, indexOfItem, newValue)

app.items.splice(indexOfItem, 1, newValue)

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

app.items.splice(newLength)

對象的 v-for

v-for除了可以使用在數(shù)組上之外還可以應(yīng)用在對象上。

    {{ value }}


// JavaScript
obj: {
    firstName: 'Airen',
    lastName: 'Liao',
    age: 30
}

使用v-for可以把obj的每個key對應(yīng)的value值遍歷出來，并且填到對應(yīng)的li元素中。效果如下：

你也可以給對象的key遍歷出來：

    {{ key }}: {{ value }}

效果如下：

同樣，也可以類似數(shù)組一樣，可以把index索引做為第三個參數(shù)：

    {{ index }}. {{ key }}: {{ value }}

前面提到過，數(shù)組可以變異，但對于對象而言，Vue不能檢測對象屬性的添加或刪除。這主要也是由于JavaScript的限制。不過在Vue中，對于已經(jīng)創(chuàng)建好的實例，可以使用Vue.set(object, key, value)方法向嵌套對象添加響應(yīng)式屬性。例如：

var app = new Vue({
    data: {
        obj: {
            name: 'Airen'
        }
    }
})

可以使用類似下面的方式，給obj對象添加一個新的屬性age：

Vue.set(app.obj, 'age', 27)

回到我們的示例中給數(shù)據(jù)源中的obj添加一個'from'的key，而且其對應(yīng)的value值為'江西'：

除了Vue.set()之外，還可以使用app.$set實例方法，它其實就是Vue.set的別名:

mounted(){
    this.$set(this.obj, '職位', '碼農(nóng)')
}

這里用到了Vue中的mounted()，和computed一樣，也不知道他在Vue中的作用，同樣放到后面來。我們總是會搞明白的。

有時候你可能需要為已有對象賦予多個新屬性，比如使用Object.assign()或_.extend()。在這種情況下，應(yīng)該用兩個對象的屬性創(chuàng)建一個新的對象。所以，如果你想添加新的響應(yīng)式屬性，不要像這樣：

Object.assign(this.obj, {
    age: 27,
    favoriteColor: 'Vue Green'
})

應(yīng)該這樣做：

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

一段取值范圍的 v-for

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

    {{ n }}

結(jié)果如下：

v-for 和 一個