vue数据更新UI不刷新显示的解决办法


Posted in Javascript onAugust 06, 2020

vue比较常见的坑就是数据(后台返回)更新了,但是UI界面并没有更新,常见于以下情况:

一、数据为数组时

1.通过数组索引修改数组元素例如:

vue数据更新UI不刷新显示的解决办法

此时UI数据并不会刷新

2.修改数组长度时:

vue数据更新UI不刷新显示的解决办法

解决方案:

vue数据更新UI不刷新显示的解决办法

如果data为JSON数组则如下:

vue数据更新UI不刷新显示的解决办法

第一个参数为要更新数据的数组,第二个参数为要更新的数组中具体的元素下标,第三个参数为新数据

备注:

数组原型上的方法vue可直接检测到变化:push(),pop(),shift(),unshift(),splice(),sort()

二、数据为对象时:

Vue 不能检测对象属性的添加或删除:你可以这样添加一个属性

vue数据更新UI不刷新显示的解决办法

如果要添加多个属性可以

vue数据更新UI不刷新显示的解决办法

补充知识:vue computed计算属性和watch监听属性解疑答惑

computed计算属性

计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名。

相比于方法它的优势是只有当依赖的属性变化时,才会重新计算。而方法会在每次重新render的时候都会执行,因此计算属性相比方法性能明显更高,而且计算属

性可直接绑定在v-model属性上。计算属性还提供get和set方法进行读写操作。

vue数据更新UI不刷新显示的解决办法

watch方法

一旦监听了data中的属性,只要data数据变化了会立即触发watch方法,watch方法不仅可以监听变量,还可以监听对象里的某个属性,甚至是数组里的某个元素

html:

vue数据更新UI不刷新显示的解决办法

javascript:

vue数据更新UI不刷新显示的解决办法

以上这篇vue数据更新UI不刷新显示的解决办法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jQuery定义插件的方法
Dec 18 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
angular实现input输入监听的示例
Aug 31 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 #Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 #Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
You might like
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
组合算法的PHP解答方法
2012/02/04 PHP
php读取mysql的简单实例
2014/01/15 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
Python制作爬虫采集小说
2015/10/25 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
python做接口测试的必要性
2019/11/20 Python
python 画条形图(柱状图)实例
2020/04/24 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
大学生新闻专业个人自我评价
2013/11/12 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
学术会议欢迎词
2014/01/09 职场文书
创先争优公开承诺书
2014/08/30 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技