原生渲染指令

以下两种情形的数据变化，vue无法再视图中作出响应

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

如添加以下代码，点击按钮修改

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

没有任何响应，但事实上值已经更新，

不过设置某索引对应对象的属性，时会有响应的

modifyItem(){
    //无响应
    this.boxOffice[0] = { name: "The Last Jedi", year: 2017, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" } }
    this.boxOffice.length = 5
    //有响应
    this.boxOffice[1].name = "somename"
}

索引值和长度的改变是因为其他改变(this.boxOffice[1].name = "somename")触发了响应，而并非他们自身是响应式的。

为了解决这个问题提供了两种:使用变异方法splice()和Vue.set

//设置
modifyItem(){
    //无响应
    // this.boxOffice[0] = { name: "The Last Jedi", year: 2017, sells: "13.32", director: { firstname: "yannie", lastname: "cheung", age: "17" } }
    // this.boxOffice.length = 5
    
    //无响应的解决方法
    // this.$set 等价于 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" }})
    //修改长度
    this.boxOffice.splice(5)
    
    //有响应
    // this.boxOffice[1].name = "somename"
}

此时，点击按钮设置新状态，立刻作出响应。

对于对象而言，属性的添加或删除无法响应，如

//添加对象属性
modifyObject(){
    this.boxOffice[0].director.sex = "male"
}

可以使用Vue.set解决这个问题

或者将对象原先属性和新增属性合并成新对象再赋给该对象，这使我们可以添加多个属性，如:

//methods
//添加对象属性
modifyObject(){
    // 无响应
    // 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，包裹多个元素，下节有使用到。

v-for 的优先级比 v-if 高。就是说可以向下面这样，先展开所有列表项，之后 v-if 将作用于每个列表项。

为影片添加是否上映属性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 的优先级

    

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

v>

如果想设置在某条件下循环是否执行，那么可以在外层加上 v-if

v-for|if 的优先级

    
    
没有影片

和在原生元素上使用一样，只是必须使用 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")

更多内容参见组件与单文件组件部分