Vue_1-5_列表渲染v-for+splice()用法

列表渲染v-for+splice()用法

    <!-- 
    1.列表显示
        数组：v-for / index
        对象：v-for / key
    2.列表的更新显示
        删除item
        替换item -->
        <div id="app">
            <h3>测试：v-for遍历数组</h3>
            <ul>
                <li v-for="(item,index) in persons" :key="index">
                    <!-- 当前元素  item
                    下标      index
                    遍历对象  persons
                    :key     加: 让文本变成表达式   -->
                  {{index}}---{{item.name}}---{{item.age}}
                  ---<button @click="deleteP(index)">删除</button>
                  ---<button @click="updatei(index,{name:'Cat',age:20})">更新</button>
                </li>
            </ul>
            <h3>测试：v-for遍历对象</h3>
            <ul>
                <li v-for="(item,key) in persons[1]" :key="key">
                    {{item }}---{{key}}
                </li>
                <!-- 前后key不一样，第一个为属性名，第二个为主键 -->
            </ul>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            //vue本身只是监视了persons的改变，没有监视数组内部的改变
            //Vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，再更新界面），比如说splice()
            new Vue({
                el:"#app",
                data:{
                    persons:[
                        {name:'tom',age:18},
                        {name:'jack',age:19},
                        {name:'ben',age:20},
                        {name:'malk',age:21},
                    ]
                },
                methods:{
                    deleteP(index){
                        //删除persons中指定index的item
                        this.persons.splice(index,1);//实现删除
                        //该语句也没有改变persons本身
                    },
                    updatei(index,newi){
                        // this.persons = [];
                        // this.persons[index] = newi;
                        //并没有改变persons本身，而是改变其内部结构
                        //没有调用变异方法，vue不会更新界面
                        this.persons.splice(index,1,newi);//实现修改
                        // this.persons.splice(index,0,newi);//实现增加
                    }
                }

            })
        </script>