vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue数据更新视图不刷新

vue数据更新但视图(DOM)不刷新的几种解决办法

作者:前端小卡车

这篇文章主要给大家介绍了关于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数据更新视图不刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文