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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
基于vue中的scoped坑点解说
Sep 04 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
解析php取整的几种方式
2013/06/25 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python中cPickle类使用方法详解
2018/08/27 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python修改列表值问题解决方案
2020/03/06 Python
python自动下载图片的方法示例
2020/03/25 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
如何选择使用结构还是类
2014/05/30 面试题
网络维护中文求职信
2014/01/03 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
代码复现python目标检测yolo3详解预测
2022/05/06 Python