Vue.set方法(响应数据和视图层)
Vue.set方法(响应数据和视图层)
十月梦想
发布于 2018-10-09 15:18:16
发布于 2018-10-09 15:18:16
代码可运行
运行总次数：0
代码可运行
前面一篇说过直接修改数据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 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
