Vue列表渲染 v-for

循环语句v-for

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

1 v-for绑定数组

v-for绑定数据到数组list来渲染列表
<div id="root">
        <div v-for="(item,index) in list" :key="item.id">
                {{item.text}}---{{index}}
        </div>
    </div>
    <script>
        var vm=new Vue({
            el: root,
            data:{
                list:[{
                    id: "010120210",
                    text:"hello"
                },{
                    id:"010120202",
                    text: "Dell"
                },{
                    id:"010120203",
                    text:"Lee"
                }],
                object:{
                    name: "willard",
                    age:"29"
                }
            }
        })
    </script>

 结果展示

2 数组更新检测：

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

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

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

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

 

3 、v-for绑定对象

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

v-for迭代对象
<div id="root">       
        <div v-for="(item,key,index) in object" >
            {{item}}---{{index}}--{{key}}
        </div>
    </div>
    <script>
        var vm=new Vue({
            el: root,
            data:{                
                object:{
                    name: "willard",
                    age:"29"
                }
            }
        })
    </script>

 结果展示：

对象更新：

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

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

 

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

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

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

使用方法：

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

例如: