vue对对象、数组的增、删、改、查

发布时间：2020-06-14 11:37:37 作者：梁十八
来源：网络阅读：1462
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue修改数组元素方法</title>
    </head>
    <body>
        <div id="root">
            <div v-for="item in arr">
                {{ item }}
            </div>
            <button @click="changeArr1">修改数组元素方法--方法一</button>
            <button @click="changeArr2">修改数组元素方法--方法二</button>
            <button @click="changeArr3">修改数组元素方法--方法三</button>
            <button @click="getTheArr">获取数组元素</button>
            <button @click="getTheNewArr">获取新数组元素</button>
            <button @click="addUserObj">增加/修改对象元素</button>
            <button @click="delUserObj">删除对象元素</button>
            <button @click="updateUserObj">修改/增加对象元素</button>
            <button @click="printUserObj">打印对象元素</button>
            <button @click="addUserArr">增加数组元素</button>
            <button @click="delUserArr">删除数组元素</button>
            <br>//遍历数组：
            <div v-for="(v, k, index) in user">
                <p>
                    uid: {{k}},
                    avatar: {{v.avatar}},
                    nick: {{v.nick}}
                </p>
            </div>
            <div v-for="item in user">
                {{item.nick}}——{{item.avatar}}
            </div>
            点一次显示一个头像
            <div></div>>
        </div>
        <script src="./vue.js"></script>

        <script type="text/javascript">
            var vm = new Vue({
                el: '#root',
                data: {
                    arr: [1, 2, 3],
                    user: {
                        "1": {
                            "avatar": "xxx.xx/1.png",
                            "nick": "你爹"
                        },
                        "2": {
                            "avatar": "xxx.xx/2.png",
                            "nick": "你爷"
                        },
                    }
                },
                methods: {
                    changeArr1: function() {
                        Vue.set(vm.arr, 0, '方法一');
                    },
                    changeArr2: function() {
                        vm.$set(vm.arr, 0, '方法二');
                    },
                    changeArr3: function() {
                        this.arr.splice(0, 1, '方法三');
                        //vm.arr.splice(0,1,'方法三');
                    },
                    //获取元素
                    getTheArr: function() {
                        console.log(this.arr[0]);
                    },
                    //获取元素
                    getTheNewArr: function() {
                        console.log(this.user["1"]["avatar"]);
                    },
                    //给对象增加元素
                    addUserObj: function() {
                        console.log(this.user)
                        Vue.set(this.user, "3", {"avatar":"xxx.xx/3.png","nick":"阿三"})
                        console.log(this.user);
                        console.log(this.user["3"]["avatar"]);
                    },
                    //删除对象元素
                    delUserObj: function() {
                        //console.log(this.user["1"]["avatar"])
                        console.log(this.user);
                        Vue.delete(this.user, "1");
                        console.log(this.user);
                    },
                    updateUserObj: function() {
                        Vue.set(this.user, "3", {"avatar":"yyy.yy/3.jpg","nick":"三哥"})
                    },
                    //给数组添加元素
                    addUserArr: function() {
                        this.arr.push("嘿嘿嘿");
                        console.log(this.arr);
                    },
                    //删除数组中元素
                    delUserArr: function() {
                        arrLen = this.arr.length;
                        Vue.delete(this.arr, arrLen - 1);
                        console.log(this.arr);
                    },
                    //在js中遍历vue的data中的内容
                    printUserObj: function() {
                        for (let key in this.user) {
                            console.log(key, this.user[key]["nick"], this.user[key]["avatar"]);
                        } 
                    }
                }
            });
        </script>
    </body>
</html>
vue对对象、数组的增、删、改、查

相关阅读
