vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法
更新時間：2023年08月23日 08:31:42 作者：前端小卡車
這篇文章主要給大家介紹了關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法,我們在開發(fā)過程中經(jīng)常會碰到數(shù)據(jù)更新,但是視圖并未改變的情況,需要的朋友可以參考下
第一種：強(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()
// 賦值之后強(qiáng)制更新視圖
如
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)文章
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue組件之全局注冊和局部注冊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
map()函數(shù)定義在JS的array中,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vscode不支持nvue語法高亮的解決辦法,用vscode開發(fā)uniapp會遇到用.nvue開發(fā)的時候。但是vscode并沒有提供.nvue的語法高亮，這篇文章給剛用vscode寫.nvue的讀者，需要的朋友可以參考下2023-02-02
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運(yùn)行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-10-10
文章介紹了uniapp微信小程序金額展示套餐的相關(guān)內(nèi)容,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了apache和nginx下vue頁面刷新404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了vue3使用reactive賦值后頁面不改變，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03
vue使用ElementUI時導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)
這篇文章主要介紹了vue使用ElementUI時導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07