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.hqwc.cn/news/54026.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring boot中web容器配置

web容器配置 spring boot 默认的web容器是 tomcat&#xff0c;如果需要换成其他的 web 容器&#xff0c;可以如下配置。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><!-- 默…

2023 电赛E题--可能会出现的问题以及解决方法

2023年电赛E题报告模板&#xff08;K210版&#xff09;--可直接使用 本文链接&#xff1a;2023年电赛E题报告模板&#xff08;K210版&#xff09;--可直接使用_皓悦编程记的博客-CSDN博客 解决激光笔在黑色区域无法识别 本文链接&#xff1a; 2023 电赛 E 题 激光笔识别有误-…

K8S系列文章之 内外网如何互相访问

K8S中网络这块主要考虑 如何访问外部网络以及外部如何访问内部网络 访问外网服务的两种方式 需求 k8s集群内的pod需要访问mysql&#xff0c;由于mysql的性质&#xff0c;不适合部署在k8s集群内,故k8s集群内的应用需要链接mysql时&#xff0c;需要配置链接外网的mysql,本次测试…

Java List(列表)

List 是一个有序、可重复的集合&#xff0c;集合中每个元素都有其对应的顺序索引。List 集合允许使用重复元素&#xff0c;可以通过索引来访问指定位置的集合元素。List 集合默认按元素的添加顺序设置元素的索引&#xff0c;第一个添加到 List 集合中的元素的索引为 0&#xff…

flutter开发实战-video_player视频播放功能及视频缓存

flutter开发实战-video_player视频播放功能及视频缓存 最近开发过程中video_player播放视频&#xff0c; 一、引入video_player 在pubspec.yaml引入video_player video_player: ^2.7.0在iOS上&#xff0c;video_player使用的是AVPlayer进行播放。 在Android上&#xff0c;…

如何在 Android 上恢复已删除的视频|快速找回丢失的记忆

想知道是否有任何成功的方法可以从 Android 手机中检索已删除的视频&#xff1f;好吧&#xff0c;本指南将向您展示分步说明&#xff0c;让您轻松从手机中找回丢失的视频文件&#xff01; 您是否不小心从 Android 智能手机中删除了珍贵的生日视频&#xff1f;难道是无处可寻吗…

【C++刷题集】-- day5

目录 选择题 单选 编程题 统计回文⭐ 【题目解析】 【解题思路 - 穷举】 【优化】 连续最大和⭐ 【题目解析】 【解题思路】 【空间优化】 选择题 单选 1、 在上下文和头文件均正常情况下&#xff0c;以下程序的输出结果是 ( ) int x 1; do {printf("%2d\n&q…

机器学习笔记

文章目录 编码器-解码器Batch Normalization好处 编码器-解码器 第二个input与transformer中的解码器类似。 Batch Normalization 尽量使得w1和w2之间呈现为正圆 训练模型的时候&#xff0c; μ \mu μ和 σ \sigma σ不可以认为是常数&#xff0c;而是包含数据的变量&…

java字符串超详解

目录 1. API 1.1 API 概述 2. String 2.1 String概述 2.2 String 构造方法 2.3 String对象的特点 2.4 字符串的比较 2.5 String中的方法 3. StringBuilder 3.1 StringBuilder 概述 3.2 StringBuilder 的构造方法 3.3 StringBuilder 的添加和反转 3.4 StringBuilder…

区块链实验室(14) - 编译FISCO-BCOS

FISCO-BCOS是一种区块链平台&#xff0c;与Hyperledger和Ethereum有些不同&#xff0c;详见FISCO BCOS 区块链 编译FISCO BCOS源码的目的是修改或者新增其中功能模块&#xff0c;进行对比实验&#xff0c;验证新想法、新创意的效果。编译的步骤很简单&#xff0c;按技术文档一…

Linux修改系统语言

sudo dpkg-reconfigure locales 按pagedown键&#xff0c;移动红色光标到 zh_CN.UTF-8 UTF-8&#xff0c;空格标记*号&#xff08;没标记下一页没有这一项&#xff09;&#xff0c;回车。 下一页选择 zh_CN.UTF-8。 如果找不到 dpkg-reconfigure whereis dpkg-reconfigure …

【C++】继承的概念和简单介绍、基类和派生类对象复制转换、继承中的作用域、派生类的默认成员函数

文章目录 继承1.继承的概念和简单介绍1.1继承的概念1.2继承的定义 2.基类和派生类对象复制转换3.继承中的作用域4.派生类的默认成员函数5.继承与友元6.继承与静态成员 继承 1.继承的概念和简单介绍 1.1继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最…