Vue之对数组和对象进行遍历和修改

Vue之对数组和对象进行遍历和修改

1、对数组进行循环
v-for进行循环，有两个参数（item，index）
注意：template可以成为占位符，在DOM里面不显示

2、 修改数组的时候，不能直接通过下标去增加修改删除，
（1）可以用过push/pop/shift/unshift/splice/sort/reverse方法
（2）也可以直接改变（重新定义）list数组的整体 （var list = [ ]）
（3）全局的Vue.set(app7.list,1<此处代表下标>,2)
局部的app7.$set(app7.list,1<此处代表下标>,2)

3、对对象进行循环
v-for进行循环，有三个参数（item，index，key）

4、增加对象的时候，
（1）通过重新定义引用的对象 （var obj = { }）
（2）set方法 全局的Vue.set(app7.obj,“sex”<此处代表要增加的属性>,“女”)
局部的app7.$set(app7.obj,“sex”<此处代表要增加的属性>,“女”)

<!-- v-for的使用 -->
    <div id="app7">
    // 对数组进行循环
        <template v-for="(item,index) of list" :key="item.id">
            <div>
                {{item.text}} ---- {{index}}
            </div>
            <span>
                {{item.text}} ---- {{index}}
            </span>
        </template>
        //对对象进行循环
        <template v-for="(item,index,key) of obj">
            <div>
                {{item}} ---- {{index}}-----{{key}}
            </div>
        </template>
    </div>
    <script>
            var app7 = new Vue({
            el: '#app7',
            data: {
                list: [
                    {
                        id: "1",
                        text: '1'
                    },
                    {
                        id: "2",
                        text: '2'
                    },
                    {
                        id: "3",
                        text: '3'
                    },
                ],
                obj: {
                    name: 'mao',
                    age: 28,
                    address: 'liulin'
                }
            }
        })
    </script>