vue 條件渲染 v show

2021-09-29 11:34:00 字數 615 閱讀 7344

vue中關於條件渲染的指令有:

v-if、v-show、v-for

今天來總結一下v-show指令的用法。

v-show指令的含義顧名思義,就是讓帶有v-show指令的元素顯示與不顯示。

注意:

1、帶有v-show的元素始終會被渲染並保留在dom中。v-show知識簡單地切換元素的css屬性display。

2、v-show不支援,也不支援v-else

v-if vs v-show

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

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

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

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

附:

條件渲染官方文件解釋

Vue條件渲染(v if和v show的區別)

在專案中我們總是用到根據某一值判斷屬性是否顯示,或不同的值讓其顯示不同,顧名思義總是用v if來實現,v show也可用來判斷是否顯示,兩者有什麼區別呢?相同點 兩者都可用作為條件判斷元素是否顯示。不同點 1 v if後可跟v else if和v else用來進行不同條件下的顯示元件的不同可能性,v...

Vue條件渲染指令 v if 和 v show

條件渲染,即根據一定的條件來判斷是否渲染當前頁面。v if isshow v if,isshow為true時p div newvue script 結果如下 改變isshow的值之後,就會發生變化。用於表達v if的else部分。v if isshow v if,isshow為true時 1p 2p...

VUE課程參考 16 條件渲染v show

條件渲染指令除了v if,還有v show,v show指令用於根據元素的狀態控制元素的顯示和隱藏 div id p v if ok p p v show ok p div script src js vue.js script script let vm new vue script v if是真...