第一种:强制更新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()文章来源:https://www.toymoban.com/news/detail-513227.html
// 赋值之后强制更新视图
如
aa () {
this.form = {
a: 'a',
b: 'b'
}
// 但是dom没有发生变化 数据赋值之后加上
this.$forceUpdate()
}
对此有什么疑问 或者 其它前端面临的问题都可以来欢迎评论 在下知道的定会帮你回答希望能够帮到你 (#^.^#)文章来源地址https://www.toymoban.com/news/detail-513227.html
到了这里,关于vue数据更新但视图(DOM)不刷新解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!