Vue基礎 條件渲染

2021-10-24 15:23:55 字數 826 閱讀 5103

真正的條件渲染,確保在切換過程中條件塊內的事件***和子元件適當的被銷毀和重建,但他是有惰性的如果初始渲染條件為假,則什麼都不做直到第一次條件為真才開始渲染條件塊.

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面,否則它將不會被識別。類似於 v-else,v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。

不管初始條件是什麼,條件總是會被渲染,但是只是簡單地基於css切換

總結

v-if有更高的切換開銷,v-show有更高的初始渲染開銷,因此如果需要非常頻繁的切換建議使用v-show,反之使用v-if

輸入郵箱名

控制台改變show的值,郵箱名變成了使用者名稱,但是輸入框沒有清空還保留這上一次的資料

這是因為vue 會盡可能高效地渲染元素,通常會復用已有元素而不是從頭開始渲染,為了解決這個問題可以給元素加key值

vue條件渲染

判斷1 count 大於0,count的值是 5 判斷2 count的值是 判斷3 count的值是 data 當count值為0時,符合判斷3,呼叫判斷3的語句輸出 5 判斷2 count的值是 判斷3 count的值是 從結果看出,只呼叫了判斷1,說明它的執行 情況是按照 塊順序來去進行的,當前...

Vue 條件渲染

v if v else if v else v show 條件展示 簡單明瞭,直接上案例 案例 條件渲染 單路分支 h3 a p 條件渲染 雙路分支 h3 a p v else b p 條件渲染 多路分支 h3 美食 p 遊戲 p v else 睡覺 p 條件展示 h3 條件展示 p div bod...

Vue條件渲染

使用場景 判斷是否載入,如果為真,就載入,否則不載入 flag 如果flag為true則顯示,false不顯示 span div var vm newvue script type a a div v else if緊跟在v if或v else if之後 表示v if條件不成立時執行 else if...