vue?v-if未生效問題及解決
vue v-if未生效問題
事實證明，v-if本身是沒有什么問題的，問題出在對應(yīng)的變量身上。
前不久我使用VUE開發(fā)時遇到一個問題，好像v-if不起作用。
什么意思呢，v-if是一個條件表達(dá)式，當(dāng)且僅當(dāng)條件滿足時才觸發(fā)，但在我的程序中，它好像有時條件明明不滿足，也會被觸發(fā)。
這就很麻煩了。難道是VUE這個破爛不行？
事實上，VUE是沒啥問題的，是我不行。
代碼如圖：
問題其實出在"edit"這個變量里。
如果將edit換成“true/false”，就一點問題沒有，運行結(jié)果毫不含糊。
但換成變量就不一定了。
原因
我這些代碼放在iView的一個模式對話框modal里，而modal的所謂關(guān)閉，其實只是隱藏，并沒有從內(nèi)存中去掉。
當(dāng)再次打開時，edit還是上一次展現(xiàn)時用的值，但我沒有意識到，總認(rèn)為對話框重新出現(xiàn)時，上面的變量一定是新的。
我的思維，還停留在原始的網(wǎng)頁開發(fā)上。眾所周知，http協(xié)議是無狀態(tài)的，網(wǎng)頁關(guān)閉、打開，所有的信息都是重新初始化過的。
而現(xiàn)在vue等開發(fā)平臺，默認(rèn)是單頁系統(tǒng)，只有一個頁面，所有東西在上面，基本都是動態(tài)加載，一旦加載，默認(rèn)又會緩存下來。
這樣做好許多好處，節(jié)省資源，速度快，用戶體驗好。缺點，似乎是開發(fā)的復(fù)雜度增加了。
補充
v-if 與 v-show 的區(qū)別
二者都對應(yīng)條件，當(dāng)條件不滿足時，v-if不加載，v-show加載但不顯示。
在運行過程中，v-if的條件切換，由不滿足到滿足時，v-if對應(yīng)組件加載。
但這有個過程。期間組件不一定能訪問。
因此，需要將組件訪問語句放在this.$nextTick里，以免報錯。
<!-- 當(dāng)edit為真，加載Editor組件，否則加載Report組件 --> <Report ref="report1" v-if="!edit" /> <Editor ref="editor1" v-if="edit" />
checkOver () { // 校核歸來
this.edit = false
let _this = this
this.$nextTick(() => {
_this.$refs.report1.init(_this.id)
})
},
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue3中如何使用shaka-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue2.x background:url()的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在 Vue3 中,setup 函數(shù)是一個新引入的概念,它代替了之前版本中的 data、computed、methods 等選項,用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了Vue3封裝 Message消息提示實例函數(shù),具有一定的實用價值,需要的朋友可以參考下，希望能夠給你帶來幫助2021-09-09
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實例形式詳細(xì)分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關(guān)注意事項,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了react和vue的區(qū)別分析，在面試中經(jīng)常會遇到，小編通過實例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue通過ref獲取不到$refs問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue檢測屏幕變化來改變不同的charts樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10