萌新VueDay2——v-for（增删改查）

萌新Vue入门Day2——v-for

列表渲染

v-for遍历数组

vue中列表循环需加:key=“唯一标识” 唯一标识可以是标签里面的id或者index等。

<div id="test">
    <ul>
    //p :对象 index: 数组下标 students: 数组 :key :唯一标记
        <li v-for="(p,index) in students" :key="index">
            name:{{p.name}},age:{{p.age}}
        </li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
        //申明数组students，[]
        //{}包括的是对象
            students:[
                {name:'A',age:18},
                {name:'B',age:18},
                {name:'C',age:21}
            ]
        }
    })
</script>

因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

添加按钮，实现删除更新功能

删除：

 <li v-for="(p,index) in students" :key="index">
            name:{{p.name}},age:{{p.age}}---
            <button @click="deleteP(index)">删除</button>
        </li>

<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#test',
        data:{
            students:[
                {name:'A',age:18},
                {name:'B',age:18},
                {name:'C',age:21}
            ]
        },methods:{
            deleteP(index){
                this.students.splice(index,1);
            }
        }
    })
</script>

更新：

methods:{
            deleteP(index){
                this.students.splice(index,1);
            },
            updata(index,newP){
                this.students[index] = newP;
            }
        }

通过对象下标替换属性值
但是通过实践此方法是错误的，Vue监听的是students这个对象，而不是这个对象里面的数组信息，也就是说，改变里面的值，并不能在页面上实现更新的功能

注意事项
由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
利用删除，传入一个对象，删掉再加一个

methods:{
            deleteP(index){
                this.students.splice(index,1);
            },
            updata(index,newP){
                this.students.splice(index,1,newP);
            }
        }