vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法
更新時間：2023年08月23日 08:31:42 作者：前端小卡車
這篇文章主要給大家介紹了關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法,我們在開發(fā)過程中經(jīng)常會碰到數(shù)據(jù)更新,但是視圖并未改變的情況,需要的朋友可以參考下
第一種：強制更新dom
<div v-if="isTrue">{{num}}</div>
data(){
return {
isTrue: true,
num: 0
}
}
aa () {
this.isTrue = false // 強制刷新視圖
this.num++
this.isTrue = true // 強制刷新視圖
}第二種：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()
// 賦值之后強制更新視圖
如
aa () {
this.form = {
a: 'a',
b: 'b'
}
// 但是dom沒有發(fā)生變化 數(shù)據(jù)賦值之后加上
this.$forceUpdate()
}總結(jié)
到此這篇關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法的文章就介紹到這了,更多相關(guān)vue數(shù)據(jù)更新視圖不刷新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天遇到一個bug,有一個Element的message組件,用它做的一個進度條,它是寫在一個頁面上,并且是用js控制dom元素的,web端一切正常,但是,H5頁面刷新的時候它樣式加載不出來了,所以本文主要介紹了Vue項目刷新后h5樣式失效的原因及解決方案,需要的朋友可以參考下2024-10-10
element根據(jù)輸入動態(tài)生成表格的示例代碼
在現(xiàn)代電商系統(tǒng)開發(fā)中,后臺管理界面經(jīng)常需要根據(jù)商品規(guī)格和規(guī)格值動態(tài)生成SKU表格,本文通過element-ui框架,展示了如何在Vue.js的環(huán)境下,利用子組件和動態(tài)綁定的方式,實現(xiàn)SKU表格的增刪改查功能2024-11-11
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下2017-09-09
這篇文章主要介紹了實現(xiàn)一個Vue版Upload組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實用價值，需要的朋友可以參考下2018-12-12
vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下2024-07-07
vue展示dicom文件醫(yī)療系統(tǒng)的實現(xiàn)代碼
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了vue項目記錄鎖定和解鎖功能實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue使用lodash進行防抖節(jié)流的實現(xiàn)
本文主要介紹了Vue使用lodash進行防抖節(jié)流的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue3 數(shù)組間取消強關(guān)聯(lián)的幾種實現(xiàn)方法
在Vue3中,如果你想要從一個數(shù)組中獲取數(shù)據(jù)并替換另一個數(shù)組中的數(shù)據(jù),但又不想讓這些數(shù)組之間存在強關(guān)聯(lián),你可以通過使用數(shù)組的拷貝、展開運算符或使用數(shù)組的slice()方法來實現(xiàn),感興趣的可以了解一下2025-11-11