首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.set方法(响应数据和视图层)

Vue.set方法(响应数据和视图层)

作者头像
十月梦想
发布2018-10-09 15:18:16
6330
发布2018-10-09 15:18:16
举报
文章被收录于专栏:十月梦想十月梦想

前面一篇说过直接修改数据vue是检测不到的,所以视图层和数据层不能保持同步!那么vue是否提供了保持响应的方法,答案肯定是有的!

Vue.set()可以进行保持同步响应

数组保持同步

<div id="app">
        <h4 v-for="item in list">{{item}}</h4>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            list:["Python从入门到放弃","CSS3网页布局","Jquery5天入门到实战","C++","C PRE"]
        }
    })
</script>

其实通过Vue.set方法和实例方法app.$set()都是可以完成同步修改的

//vue方法
Vue.set(app.list,0,"修改第1项")
//实例方法新增一项
app.$set(app.list,5,"新增一项")

对象保持同步

既然数据可以保持同步,那么对象行不行呢?我们进一步看一下对象的效果!

<div id="app">
        <h4 v-for="item of personInfo">{{item}}</h4>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            personInfo:{
                name:"Jack Ma",
                age:28,
                sex:"男"
            }
        }
    })
</script>

对象也是可以通过Vue.set方法和实例方法app.$set()都是可以完成同步修改的

//vue方法
Vue.set(app.personInfo,"name","Jack Lee")
//实例方法新增一项
app.$set(app.personInfo,address,"北京")

    至此数组的改变视图层的方法有三种(变异,类型重新引用和set),对象改变视图也有两种(类型引用和set)

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-9-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 数组保持同步
  • 对象保持同步
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档