js框架 Vue框架的基礎學習 二 條件渲染

2021-08-19 23:22:12 字數 812 閱讀 2362

相同點:

v-if與v-show通過條件判斷true或者false來確定html元素的顯示與否

作用是一樣的。

不同點:

1.v-if可以與v-else指令一起使用,v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面,否則它將不會被識別。

例如:

2.v-if 是「真正」的條件渲染,因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。

v-if 也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。

相比之下,v-show 就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 css 進行切換。

一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在執行時條件很少改變,則使用 v-if 較好。

也就是說:v-if在條件判斷為false的時候是元素不會被渲染的,而v-show在條件判斷為false還是會渲染,

例如:

在div中用v-if指令的一行沒有被渲染,用v-show指令的被渲染,並只改了css樣式將display變為none

SpringCloud學習(二)(框架的基礎知識)

一 常見的微服務框架 1 springcloud 是一系列框架的有序集合。它利用spring boot的開發便利性巧妙地簡化了分布式系統基礎設施的開發,如服務發現註冊 配置中心 訊息匯流排 負載均衡 斷路器 資料監控等,都可以用spring boot的開發風格做到一鍵啟動和部署。spring clo...

Vue 基礎框架目錄解析

當我們用npm生成乙個專案的時候,我們要了解這個專案的檔案 1.index.html 是所有html的入口,點開該index.html 可以看到 charset utf 8 name viewport content width device width,initial scale 1.0 hell...

js框架封裝(二) 選擇器框架

在這篇部落格中,我會介紹選擇器框架的封裝 extend tag選擇器 tag function tag,layer if layer else class選擇器 class function classname,layer if layer else 通用選擇器 select function se...