vue学习（九） set用法

最新推荐文章于 2022-07-29 15:37:55 发布

dream21st

最新推荐文章于 2022-07-29 15:37:55 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： vue学习

本文链接：https://blog.youkuaiyun.com/qq_36305027/article/details/83720793

vue学习专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍Vue.js中使用Vue.set及app.$set方法进行动态数据绑定的技巧，包括数组和对象的实时更新，以及7种操作数组的方法，如push、pop等，确保视图与数据同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="(item,index) of list" :key="item.id">
            {{item.id}}
        </div>


        <div v-for="(item,key,index) of userInfo">
            {{item}}  --- {{key}}  ---{{index}}
        </div>

    </div>

    <script>
        //Vue.set(app.list,1,{id:'003',name:'hhhh'})
        //app.$set(app.list,0,{id:'004',name:'ahshhs'})
        //Vue.set(app.userInfo,'sex','男')
        //app.$set(app.userInfo,'phone','12345678')
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                list:[{
                    id:"001",
                    name:'zhangsan'
                },{
                    id:'002',
                    name:'lisi'
                }],
                userInfo:{
                    id:'123',
                    name:'zhangsnah',
                    age:29,
                    address:'shanghai'
                }
            }
        })
    </script>
</body>
</html>

2，在控制台输入

Vue.set(app.list,1,{id:'003',name:'hhhh'})

//app.$set(app.list,0,{id:'004',name:'ahshhs'})

Vue.set(app.userInfo,'sex','男')

//app.$set(app.userInfo,'phone','12345678')

页面会及时更新

3，操作数组有7中方法

push pop shift unshift splice sort reverse