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,'小红');}
}

Vue中，$forceUpdate()的使用相关推荐

antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
mockjs vue ajax,mockjs在vue中的使用
mockjs在vue中的使用 mockjs在vue中的使用前后端分工协作是一个非常高效的做法,但是有时前后端分离不彻底会很痛苦.前后端应该是异步进行的,进度互不影响,但是在没有mock的时候,前端却 ...
stylus在vue中的使用
stylus是一个css预处理器,比较流行的css预处理器有sass.less.stylus,它们都一样,都是css的语法糖,可以使用变量,可以有简单的逻辑,使css的开发效率更高,更易维护.styl ...
Vue中watch的使用
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动. 如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项. 下面写两个demo,参考demo ...
理解vue中$watch使用
侦听组件实例上的响应式 property 或函数计算结果的变化.回调函数得到的参数为新值和旧值. 我们只能将顶层的 data.prop 或 computed property 名作为字符串传递.对于更 ...
Moment.js在Vue中使用
Moment.js在Vue中使用 1. 安装依赖包 npm install moment --save 2. main.js中引入 import moment from 'moment' Vue.pr ...
vue中用table_element-ui中的 table 组件在vue中的使用
经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉,通常它长下面这个样子: 但是我们可以使用使用 v-for 来优化模版中的 el-table-column v-for=& ...
vue echarts div变化_数据可视化之echarts在Vue中的使用
数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快.更准确的理解数据. 一.为什么选择echarts: 简单上手容易满足绝大部分的开发需要在可视化库中有较好的体验和口碑二.在V ...
live2d在vue中的运用
live2d在vue中的运用: 1.首先先下载live2d的安装包链接:https://pan.baidu.com/s/1Ay3Tk3sZInHHwqpBkBHP7w 提取码:zjsk 2.将下载好 ...
img： SVG格式在vue中的使用
SVG格式在vue中的使用 SVG:svg是一种图像文件格式,它是可缩放的矢量图形,它是基于XML,由World Wide Web Consortium (W3C)联盟进行开发的.严格来说应该是一种开 ...

Vue中，$forceUpdate()的使用

Vue中，$forceUpdate()的使用相关推荐

最新文章

热门文章