美文网首页
Vue更新数组和对象

Vue更新数组和对象

作者: Hi小胡 | 来源:发表于2018-01-17 09:54 被阅读809次

    更新数组:

    var app = new Vue({
        el:"#app",
        data:{
            users:[
                { "name": "hester", "age": 15},
                { "name": "jack", "age": 17}
            ]
        }
    });
    
    //更新操作
    function update() {
        /*
        方法:
        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
         */
        app.users.push({ "name": "rose", "age": 20});
    }
    

    失效更新方式:
    1.利用索引设置值:app.users[index] = newValue;
    2.修改数组长度:app.users.length = newLength;
    解决:
    1.Vue.set(app.users,index,newValue);app.users.splice(index,1,newValue);
    2.app.users.splice(newLength);


    更新对象:

    var app = new Vue({
        el:"#app",
        data:{
            user:{
                "name":"hester",
                "age":17
            }
        }
    });
    
    //更新操作
    function update() {
        //更新一个属性
        Vue.set(app.users, 'age', 27);
    
        //更新多个属性
        app.users = Object.assign({}, app.users, {
            age: 27,
            gender: 'male'
        });
    }
    

    相关文章

      网友评论

          本文标题:Vue更新数组和对象

          本文链接:https://www.haomeiwen.com/subject/ojeyoxtx.html