浅谈本项目中的数据双向绑定,修改对象属性以及数组

用习惯angular.js之后,大多数开发者再学习vue的话,其实总体来说,是比较好上手的,但是归于一些细节,还是有不同的,比如数据的双向绑定。

先来看一下vue中修改对象的属性:

//html代码
{{obj.title}}
//js代码

浅谈本项目中的数据双向绑定,修改对象属性以及数组_第1张图片

还好,这个和angular.js的数据双向绑定是一样的,这里不多说,看以上代码就能明白。

来看一下数组的操作:

//html代码
 
{{item.index}}

先来看一下changeArr的效果,当然结果和预期的一样:


浅谈本项目中的数据双向绑定,修改对象属性以及数组_第2张图片

再来看看change的效果:


浅谈本项目中的数据双向绑定,修改对象属性以及数组_第3张图片

我们发现,change方法并没有触发vue页面中的重新渲染,而在控制台中打印的数组确实已经变化了,WHY?

由于javascript的限制,vuejs不能检测到下面数组的变化:

直接索引设置元素,如vm.item[0]={};
修改数据的长度,如vm.item.length。

为了解决问题,Vuejs扩展了观察数组,为它添加一个$set()方法:

如何使用,这里不必多说了,给一个示例


浅谈本项目中的数据双向绑定,修改对象属性以及数组_第4张图片

一个简单的数组位置替换。

再附上一个vue比较常见的问题的传送门,写得很好。
https://segmentfault.com/a/1190000005832164

你可能感兴趣的:(浅谈本项目中的数据双向绑定,修改对象属性以及数组)