回首Vue3之指令篇（三）

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

這篇文章咱們來說一下v-show和v-if、v-else-if、v-else怎麼去使用，使用它們的時候須要注意什麼，以及它們之間的差別是什麼。

v-show

v-show的用法

v-show 只是簡單地切換元素的 CSS property display。

假定一個布爾值數據isShow=true，咱們能夠以下使用：

<h1 v-show="isShow">hello</h1>
複製代碼

其本質是改變h1的display值，以下：

document.querySelector("h1").style.display="none"
複製代碼

固然獲取元素的方法你能夠選擇你喜歡的，這裏用的querySelector獲取h1（此處h1標籤惟一，若是不惟一是不能夠這樣使用的）。在使用v-show的時候，咱們須要注意，v-show 不支持 <template> 元素。若是你用在<template> 元素上，將會發生下面的狀況：

編譯前

<template v-show="isShow">
    <div>hello</div>
</template>
複製代碼

編譯後

從圖片中能夠看出，不管isShow的值怎麼改變，template的樣式始終爲display:none,因此在使用v-show的時候咱們須要注意這一點。

v-if、v-else-if、v-else

v-if、v-else-if、v-else的用法

根據表達式的真假值來有條件地渲染元素。在切換時元素及它的數據綁定 / 組件被銷燬並重建。若是元素是 <template>，將提取它的內容做爲條件塊。

假定一個布爾值數據isShow以及你想渲染的dom（<div>world</div>）,若是isShow=ture，dom結構中有這行代碼；若是isShow=false，dom結構中則沒有這行代碼。

若是咱們想切換多個元素呢？此時，咱們須要用<template>元素包裹，並在上面使用 v-if。下面讓咱們看看他們發生了什麼？

編譯前

<template v-if="isShow">
    <div>hello</div>
    <div>world</div>
</template>
複製代碼

編譯後此時，isShow=true，顯示template裏面的內容

<div>hello</div>
<div>world</div>
複製代碼

編譯後此時，isShow=false，不顯示dom

<!--v-if-->
複製代碼

v-else-if、v-else的注意事項

1. v-else-if 必須緊跟在帶 v-if 或者 v-else-if 的元素以後。

2. v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

總結

官方說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

對於上述說法，咱們遵照固然是好的，可是在實際開發中，也須要根據功能須要來使用，這個就須要本身去界定。