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数据更新视图不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天遇到一个bug,有一个Element的message组件,用它做的一个进度条,它是写在一个页面上,并且是用js控制dom元素的,web端一切正常,但是,H5页面刷新的时候它样式加载不出来了,所以本文主要介绍了Vue项目刷新后h5样式失效的原因及解决方案,需要的朋友可以参考下2024-10-10
在现代电商系统开发中,后台管理界面经常需要根据商品规格和规格值动态生成SKU表格,本文通过element-ui框架,展示了如何在Vue.js的环境下,利用子组件和动态绑定的方式,实现SKU表格的增删改查功能2024-11-11
本篇文章主要介绍了在Vue.js中使用Mixins的方法，Vue的Mixins是非常实用的编程方式，可以使代码变得容易理解，有兴趣的一起来了解一下2017-09-09
这篇文章主要介绍了实现一个Vue版Upload组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这次我想给大家介绍的内存泄漏的定位方法，并非工具的使用。而是一些经验的总结，也就是我所知道的 VueJS SSR 中最容易出现内存泄漏的地方，非常具有实用价值，需要的朋友可以参考下2018-12-12
vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)
有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件,这篇文章主要介绍了vue 2 实现自定义组件一到多个v-model双向数据绑定的方法,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了vue展示dicom文件医疗系统的实现代码，非常不错，具有一定的参考借鉴加载,需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了vue项目记录锁定和解锁功能实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
本文主要介绍了Vue使用lodash进行防抖节流的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
在Vue3中,如果你想要从一个数组中获取数据并替换另一个数组中的数据,但又不想让这些数组之间存在强关联,你可以通过使用数组的拷贝、展开运算符或使用数组的slice()方法来实现,感兴趣的可以了解一下2025-11-11
最新评论