05.新手入門vue之v-if和v-show

v-if指令

根據表達式的值有條件地渲染元素,如果表達式的值為真則顯示對應的標籤，如果為假就不顯示。

<code>


    
    
    <title>Document/<title>


    

        
        
如果為true則顯示

        
如果為假則不顯示

    




/<code>

v-show指令

根據表達式之真假值，切換元素的 display CSS 屬性。

<code>


    
    
    <title>Document/<title>


    
 

        
        
如果為真，則顯示

    




/<code>

總結

v-if 和v-show都是根據表達式值的真假顯示標籤的顯示和隱藏；

v-if指令在切換時元素及它的數據綁定 / 組件被銷燬並重建

v-show指令切換元素的 display CSS 屬性，v-if具有很高的切換開銷，v-show具有很高的初始渲染開銷

因此，需要頻繁的切換，使用v-show好，如果在使用時很少改變時，使用v-if較好。

閱讀更多 就叫春哥 的文章

關鍵字: 虛擬機 新手入門 CSS