vue列表渲染 | 易学教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="demo">
    <p>v-for遍历数组</p>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}} ---{{p.age}} ---{{index}} -----
            <button @click="del(index)">删除</button>
            <button @click="update(index,{name:'Cat',age:46})">更新</button>
        </li>
    </ul>
    <p>v-for遍历对象</p>
    <ui>
        <li v-for="(value,key) in persons[1]"  :key="key">
            {{key}}-----{{value}}
        </li>
    </ui>
</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#demo",
        data: {
            persons: [ // vue只是监视了persons的改变， 没有监视persons内部数组的改变
                {name: 'Tom', age: 12},
                {name: 'Admin', age: 13},
                {name: 'Root', age: 16},
                {name: 'Rose', age: 10},
            ]
        },
        methods: {
            del(index){
                //删除指定的元素
                this.persons.splice(index, 1)   // 删除功能
            },
            update(index, newP){
                // 没有调用vue 数组的变异方法
//                this.persons[index] = newP;  //该操作没有改变persons对象，只是改变了person指向的数组中的元素对象


                this.persons.splice(index, 1, newP);  // 修改功能，先将index这个元素删除，再将newP添加到这儿
//                this.persons.splice(index, 0, newP);  // 增加


            }
        }

    });
</script>
</body>
</html>

vue数组中的增删改实现：

this.persons.splice(index, 1)   // 删除index这个元素
this.persons.splice(index, 0, newP);  // 添加元素newP
this.persons.splice(index, 1, newP);  // 将index下标元素改成newP

来源：https://www.cnblogs.com/z-qinfeng/p/12389773.html

标签

vue

splice