当前位置: 首页 > news >正文

Vue中,$forceUpdate()的使用

在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。

那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。
但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的 

<template><p>{{userInfo.name}}</p><button @click="updateName">修改userInfo</button>
</template>
<script>data(){return{userInfo:{name:'小明'}}},methods:{updateName(){this.userInfo.name='小红'}}
</script>

updateName函数中,我们尝试给userInfo对象修改值,发现页面其实并没有变化

那这时候有两种解决方法:

方法一

methods:{updateName(){this.userInfo.name='小红'//在此时,确实已经将userInfo对象修改完成console.log(this.userInfo.name);//输出结果: 小红this.$forceUpdate();//在这里,强制刷新之后,页面的结果变为'小红'}
}

方法二:

methods:{updateName(){this.$set('userInfo',name,'小红');}
}

http://www.lryc.cn/news/111991.html

相关文章:

  • K8s中的Ingress
  • c++调用ffmpeg api录屏 并进行udp组播推流
  • war包方式安装linux和windows的geoserver
  • 安装CUDA与CUDNN与Pytorch(最新超级详细图文版本2023年8月最新)
  • 内存快照:宕机后,Redis如何实现快速恢复?RDB
  • Linux之 Ubuntu 安装常见服务 (二) Tomcat
  • docker 配置 Mysql主从集群
  • Layui实现OA会议系统之会议管理模块总合
  • fishing之踩坑篇捕获数据不齐全
  • ppt使用笔记
  • java中的hashmap和concurrenthashmap解析
  • 元素2D转3D 椭圆形旋转实现
  • Centos7.9 制作openssh9.2p2 rpm升级包和升级实战
  • JavaScript学习(3)
  • 2023华为OD机试真题Java实现【寻找最大价值的矿堆/深度优先搜索】
  • MyCat概述
  • 【LeetCode】【数据结构】单链表OJ常见题型(一)
  • QGraphicsView实现简易地图3『局部加载-地图缩放』
  • bash的特性(二)IO重定向与管道
  • elb 直接配置到后端服务器组
  • 安卓:BottomNavigationBar——底部导航栏控件
  • 十、用 ChatGPT 辅助写文章
  • 计算机毕设 深度学习猫狗分类 - python opencv cnn
  • 60多行代码仿制B站首页一个好看的卡片效果
  • Redis内网主从节点搭建
  • ESP32-C2开发板 ESP8684芯片 兼容ESP32-C3开发
  • Zebec 创始人 Sam 对话社区,“Zebec 生态发展”主题 AMA 回顾总结
  • 一台电脑给另外一台电脑共享网络
  • AAA 认证
  • jvm-程序计数器