以下兩種情形的數(shù)據(jù)變化，vue無(wú)法再視圖中作出響應(yīng)

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

如添加以下代碼，點(diǎn)擊按鈕修改

modifyItem(){
    this.boxOffice[0] = { name: "The Last Jedi", year: 201
![clipboard.png](/img/bV8201)
7, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" } }
    this.boxOffice.length = 5
}

vue.set test

沒(méi)有任何響應(yīng)，但事實(shí)上值已經(jīng)更新，

不過(guò)設(shè)置某索引對(duì)應(yīng)對(duì)象的屬性，時(shí)會(huì)有響應(yīng)的

modifyItem(){
    //無(wú)響應(yīng)
    this.boxOffice[0] = { name: "The Last Jedi", year: 2017, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" } }
    this.boxOffice.length = 5
    //有響應(yīng)
    this.boxOffice[1].name = "somename"
}

索引值和長(zhǎng)度的改變是因?yàn)槠渌淖?this.boxOffice[1].name = "somename")觸發(fā)了響應(yīng)，而并非他們自身是響應(yīng)式的。

為了解決這個(gè)問(wèn)題提供了兩種:使用變異方法splice()和Vue.set

//設(shè)置
modifyItem(){
    //無(wú)響應(yīng)
    // this.boxOffice[0] = { name: "The Last Jedi", year: 2017, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" } }
    // this.boxOffice.length = 5
    
    //無(wú)響應(yīng)的解決方法
    // this.$set 等價(jià)于 Vue.set
    Vue.set(this.boxOffice, 0, { name: "The Last Jedi", year: 2017, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" }})
    // this.boxOffice.splice(0, 1, { name: "The Last Jedi", year: 2017, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" }})
    //修改長(zhǎng)度
    this.boxOffice.splice(5)
    
    //有響應(yīng)
    // this.boxOffice[1].name = "somename"
}

此時(shí)，點(diǎn)擊按鈕設(shè)置新?tīng)顟B(tài)，立刻作出響應(yīng)。

對(duì)于對(duì)象而言，屬性的添加或刪除無(wú)法響應(yīng)，如

//添加對(duì)象屬性
modifyObject(){
    this.boxOffice[0].director.sex = "male"
}

可以使用Vue.set解決這個(gè)問(wèn)題

或者將對(duì)象原先屬性和新增屬性合并成新對(duì)象再賦給該對(duì)象，這使我們可以添加多個(gè)屬性，如:

//methods
//添加對(duì)象屬性
modifyObject(){
    // 無(wú)響應(yīng)
    // this.boxOffice[0].director.sex = "male"
    //解決方法
    Vue.set(this.boxOffice[0].director, "sex", "male")
    
    this.boxOffice[0].director = Object.assign({}, this.boxOffice[0].director,{
        aliasname:"kanzaki urumi",
        graduation: "NUIST"
    })
}

同 v-if，包裹多個(gè)元素，下節(jié)有使用到。

v-for 的優(yōu)先級(jí)比 v-if 高。就是說(shuō)可以向下面這樣，先展開(kāi)所有列表項(xiàng)，之后 v-if 將作用于每個(gè)列表項(xiàng)。

為影片添加是否上映屬性run

boxOffice: [
    { name: "Avatar", year: 2009, sells: "27.88",run:true, director: { firstname: "yannie", lastname: "cheung", age: "17" } },
    { name: "Frozen", year: 2013, sells: "12.765",run:false },
    { name: "Furious 7", year: 2015, sells: "15.15",run:true },
    { name: "Iron Man 3", year: 2013, sells: "12.154",run:false },
    { name: "Titanic", year: 1997, sells: "21.868",run:false },
    { name: "Spectre", year: 2015, sells: "8.722",run:true },
    { name: "Inception", year: 2010, sells: "8.255",run:false },
    { name: "Jurassic World", year: 2015, sells: "16.99",run:false }
]

v-for|if 的優(yōu)先級(jí)

    

        {{bo.name}} {{bo.year}} ({{bo.sells}}$ )
    

v>

如果想設(shè)置在某條件下循環(huán)是否執(zhí)行，那么可以在外層加上 v-if

v-for|if 的優(yōu)先級(jí)

    
    
沒(méi)有影片

和在原生元素上使用一樣，只是必須使用 key

new Vue({
    data: {
        boxOffice: [
            { id:1,name: "Avatar", year: 2009, sells: "27.88", run: true, director: { firstname: "yannie", lastname: "cheung", age: "17" } },
            { id:2,name: "Frozen", year: 2013, sells: "12.765", run: false },
            { id:3,name: "Furious 7", year: 2015, sells: "15.15", run: true },
            { id:4,name: "Iron Man 3", year: 2013, sells: "12.154", run: false },
            { id:5,name: "Titanic", year: 1997, sells: "21.868", run: false },
            { id:6,name: "Spectre", year: 2015, sells: "8.722", run: true },
            { id:7,name: "Inception", year: 2010, sells: "8.255", run: false },
            { id:8,name: "Jurassic World", year: 2015, sells: "16.99", run: false }
        ]
    },
    components: {
        "child": {
            props:["bo"],
            template: "
{{bo.id}}、{{bo.name}}
"
        }
    }
}).$mount("#app-5")

更多內(nèi)容參見(jiàn)組件與單文件組件部分