Vue列表渲染 v-for

循环语句v-for

v-for指令以item of/in array的形式实现循环

1 v-for绑定数组

v-for绑定数据到数组list来渲染列表

        

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

 结果展示

2 数组更新检测：

1）利用索引值更改数组的一项时，Dom中并不会更新

2）使用变异方法更新数组，DOM中也会更新

变异方法包括：push、pop、shift、unshift、splice、sort、reverse

3）改变数组引用，DOM中也会更新

 

3 、v-for绑定对象

三个参数：内容，键名，索引

v-for迭代对象
       
        

            {{item}}---{{index}}--{{key}}
        
    
    

 结果展示：

对象更新：

1）通过键名修改对象的某一项的值，DOM中也会改变

2)通过键名增加一项，DOM不会改变

 

对象中已经添加了job但DOM中并没有更新

3）通过更改对象引用增加一项，DOM会更新

4、 set方法：可以使用全局变量Vue.set或实例方法vm.$set向对象添加响应式属性。

使用方法：

Vue.set(object,key,value)
vm.$set(objsct,key,value)

例如: