Vue基礎-條件渲染
一、v-if
真正的條件渲染,確保在切換過程中條件塊內的事件監聽器和子元件適當的被銷燬和重建,但他是有惰性的如果初始渲染條件為假,則什麼都不做直到第一次條件為真才開始渲染條件塊.
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面,否則它將不會被識別。類似於 v-else,v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。
二、v-show
不管初始條件是什麼,條件總是會被渲染,但是隻是簡單地基於css切換
三、v-if和v-show的區別
總結
v-if有更高的切換開銷,v-show有更高的初始渲染開銷,因此如果需要非常頻繁的切換建議使用v-show,反之使用v-if
四、用key管理可複用的元素
輸入郵箱名
控制檯改變show的值,郵箱名變成了使用者名稱,但是輸入框沒有清空還保留這上一次的資料
這是因為vue 會盡可能高效地渲染元素,通常會複用已有元素而不是從頭開始渲染,為了解決這個問題可以給元素加key值
相關文章
- Vue 基礎自查——條件渲染和列表渲染Vue
- 史上最詳細 VUE2.0 全套 demo 講解 基礎4(條件渲染)Vue
- Vue.js條件渲染與列表渲染指南Vue.js
- Java登陸第三十七天——VUE3響應式基礎、條件渲染、列表渲染JavaVue
- 條件渲染
- 02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控制元件繫結Vue事件控制元件
- Vue學習筆記(三)條件渲染和迴圈渲染Vue筆記
- react 條件渲染React
- Vue模板語法、屬性繫結、條件渲染的學習Vue
- Python基礎:條件判斷 & 迴圈Python
- SQL-基礎語法 - 條件分支SQL
- Fastadmin在原有篩選條件filter基礎之上,js重新附加新條件ASTFilterJS
- 精讀《React 八種條件渲染》React
- React學習筆記-條件渲染React筆記
- 【譯】React的8種條件渲染方法React
- 六、Vue條件判斷Vue
- excel基本操作:基礎、資料條件格式、快捷鍵Excel
- React 的幾種條件渲染以及選擇React
- v-if/v-show 條件渲染指令
- SpringBoot基礎篇Bean之條件注入@Condition使用姿勢Spring BootBean
- SpringBoot基礎篇Bean之條件注入之註解使用Spring BootBean
- 【Golang 基礎系列十】Go 語言 條件語句之ifGolang
- SQL-基礎語法 - 條件查詢 - 模糊查詢SQL
- 0基礎小白滿足什麼條件可以學Python?Python
- Vue根據條件新增click事件Vue事件
- SQL-基礎語法 - 條件查詢 - 邏輯運算SQL
- python基礎之如何用if語句判斷多個條件?Python
- 服務端渲染基礎服務端
- React 提供了幾種方式來實現條件渲染React
- react 也就這麼回事 02 —— JSX 插值表示式、條件渲染以及列表渲染ReactJS
- Vue請求介面查詢條件拼接Vue
- 豬行天下之Python基礎——4.1 條件判斷與迴圈Python
- 企業實施CRM前需要具備什麼基礎條件
- 『忘了再學』Shell基礎 — 28、AWK中條件表示式說明
- VUE基礎Vue
- Python 基礎起步 (九) 條件語句 if elif else 其實很簡單Python
- [譯] React 實現條件渲染的多種方式和效能考量React
- Vue 元件基礎Vue元件