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

2021-09-05 11:32:26 字數 637 閱讀 9737

在專案中我們總是用到根據某一值判斷屬性是否顯示,或不同的值讓其顯示不同,顧名思義總是用v-if來實現,v-show也可用來判斷是否顯示,兩者有什麼區別呢?

相同點:兩者都可用作為條件判斷元素是否顯示。

不同點:1). v-if後可跟v-else-ifv-else用來進行不同條件下的顯示元件的不同可能性,v-show只能作為是否展示。

2).v-if在想切換多個元素時把乙個元素當做不可見的包裹元素上使用,v-show不能用元素

paragraph 1

paragraph 2

3).v-if 在條件切換過程中,事件***和子元件適當地被銷毀和重建。

4). v-if條件為真才會渲染,條件為假則不渲染,v-show 無論條件真假總會渲染,只是簡單地基於 css 進行切換。

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

vue中v if條件渲染

1.判斷後台返回的值是檢測中止 或出具報告的時候 讓更改狀態按鈕消失 已發樣等待收樣 支付完成等待發樣 出現取消專案 html部分 v for yong,index in yonghu key index class person box class person one span div clas...

條件渲染 v if

v if 是否渲染當前元素 v else v else if v show 與 v if 類似,只是元素始終會被渲染並保留在 dom 中,只是簡單切換元素的 css 屬性 display 來顯示或隱藏 doctype html en utf 8 viewport content width devi...

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...