如何解决vue数组和对象渲染的问题-创新互联
这篇文章给大家分享的是有关如何解决vue数组和对象渲染的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联主要从事
网站设计制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务绥德,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
数组更新检测
在 vue 中使用数组的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法时，改变数组的同时可以触发视图的变化。
注意： 有两种情况 vue 无法检测到变动的数组，分别是：
（1）直接操作数组的长度；
// Vue.set
this.$set(arr, indexOfItem, newValue)
// Array.prototype.splice
this.arr.splice(indexOfItem, 1, newValue)
(2)利用索引直接设置一个项时，例如：this.arr[indexOfItem] = newValue
this.arr.splice(newLength)
demo如下：
{{item.name}}
改变列表的值
问题： 用v-for循环渲染数组数据时，数据更新了，视图却没有更新
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength
解决方法：
为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue) （数组， 所引， 值）
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) （所引， 长度， 值）
避免第二种情况，使用 splice：
example1.items.splice(newLength)
对象更新检测
方法一：this.$set()
方法二：Object.assign()
demo.vue
{{object}}
改变列表的值
感谢各位的阅读！关于“如何解决vue数组和对象渲染的问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
