第一種:強(qiáng)制更新dom
<div v-if="isTrue">{{num}}</div>
data(){
return {
isTrue: true,
num: 0
}
}
aa () {
this.isTrue = false // 強(qiáng)制刷新視圖
this.num++
this.isTrue = true // 強(qiáng)制刷新視圖
}
第二種:vue.$set(要操作的對象或數(shù)組, 對象key/索引, 修改后的值)
// vue.$set 修改對象或數(shù)組的數(shù)據(jù)主要是添加響應(yīng)式getter和setter讓其擁有數(shù)據(jù)響應(yīng)的特性
// 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:修改數(shù)組
let arr =[{name: "name1", sex: "男"},{name: "name2", sex: "男"}]
this.$set(arr, 1, {name: "name2", sex: "女"})
第三種: vue.$forceUpdate()文章來源:http://www.zghlxwxcb.cn/news/detail-513227.html
// 賦值之后強(qiáng)制更新視圖
如
aa () {
this.form = {
a: 'a',
b: 'b'
}
// 但是dom沒有發(fā)生變化 數(shù)據(jù)賦值之后加上
this.$forceUpdate()
}
對此有什么疑問 或者 其它前端面臨的問題都可以來歡迎評論? 在下知道的定會幫你回答希望能夠幫到你 (#^.^#)文章來源地址http://www.zghlxwxcb.cn/news/detail-513227.html
到了這里,關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!