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 相关文章推荐
Javascript处理DOM元素事件实现代码
May 23 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vue实现页面切换滑动效果
Jun 29 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中str_replace函数使用小结
2008/10/11 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python实现自动更换ip的方法
2015/05/05 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
python实现双人五子棋(终端版)
2020/12/30 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
自荐书封面下载
2013/11/29 职场文书
2014年化验员工作总结
2014/11/18 职场文书
新教师个人工作总结
2015/02/06 职场文书
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL