vue数据更新但视图(DOM)不刷新的几种解决办法
更新时间：2023年08月23日 08:31:42 作者：前端小卡车
这篇文章主要给大家介绍了关于vue数据更新但视图(DOM)不刷新的几种解决办法,我们在开发过程中经常会碰到数据更新,但是视图并未改变的情况,需要的朋友可以参考下
第一种：强制更新dom
<div v-if="isTrue">{{num}}</div>
data(){
return {
isTrue: true,
num: 0
}
}
aa () {
this.isTrue = false // 强制刷新视图
this.num++
this.isTrue = true // 强制刷新视图
}第二种：vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)
// vue.$set 修改对象或数组的数据主要是添加响应式getter和setter让其拥有数据响应的特性
// this.$set( target, propertyName/index, value )
// vue 中this及vue
// 例子1： 比如修改name值没有生效
this.form.name = "111" // 等同于 ==>
const name = "111"
this.$set(this.form, 'name', '111')
// 或
this.$set(this.form, 'name', name)
// 例子2：修改数组
let arr =[{name: "name1", sex: "男"},{name: "name2", sex: "男"}]
this.$set(arr, 1, {name: "name2", sex: "女"})第三种： vue.$forceUpdate()
// 赋值之后强制更新视图
如
aa () {
this.form = {
a: 'a',
b: 'b'
}
// 但是dom没有发生变化 数据赋值之后加上
this.$forceUpdate()
}总结
到此这篇关于vue数据更新但视图(DOM)不刷新的几种解决办法的文章就介绍到这了,更多相关vue数据更新视图不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue实现导出excel表格的功能，在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下2018-03-03
本文将介绍几种常见的 Vue 3 组件通信方法,包括 props、emits、provide 和 inject、事件总线以及 Vuex 状态管理,需要的朋友可以参考下2024-07-07
在Vue框架中,组件间的通信是一个常见的需求,特别是在子组件需要向父组件传递多个参数时,合理的通信方式可以显著提升代码的可读性和可维护性,本文将详细介绍如何在Vue中实现子组件向父组件传递多个参数,需要的朋友可以参考下2024-10-10
下面小编就为大家带来一篇iview给radio按钮组件加点击事件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
在Vue.js开发中,我们经常需要创建可复用的组件,这些组件可能会有自己的样式规则,而有时我们希望父组件能够影响子组件的样式,本文将详细介绍如何使用v-deep以及一些相关的最佳实践,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue自定义指令获取不到参数的原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vuex中的state属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文通过基本实例给大家介绍了vue计算属性和监听器的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了使用Vue实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论