vue对对象数组的增删改查

Posted 2022-07-13
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue对对象数组的增删改查相关的知识，希望对你有一定的参考价值。
<!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对对象数组的增删改查的主要内容，如果未能解决你的问题，请参考以下文章