1. 程式人生 > >Vue.js 中 v-if 和 v-show 的區別

Vue.js 中 v-if 和 v-show 的區別

官網是這樣說的:

在切換 v-if 塊時,Vue.js 有一個區域性編譯/解除安裝過程,因為 v-if 之中的模板也可能包括資料繫結或子元件。v-if 是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子元件。 
v-if 也是惰性的:如果在初始渲染時條件為假,則什麼也不做——在條件第一次變為真時才開始區域性編譯(編譯會被快取起來)。 
相比之下,v-show 簡單得多——元素始終被編譯並保留,只是簡單地基於 CSS 切換。 
一般來說,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show 較好,如果在執行時條件不大可能改變 v-if 較好。

總結下: 
1、如果我們想切換多個元素呢?此時我們可以把一個 <template> 元素當做包裝元素,並在上面使用 v-if,最終的渲染結果不會包含它。v-show 不支援<template> 語法。 
2、v-show是通過控制display屬性控制元素隱藏顯示的,在頻繁操作時候用,vue-if在初始化顯示用(條件為真的時候,區域性編譯,否則啥都不做!) 
前端開發工具vue.js開發實踐總結——關於v-if和v-show雖然都可以控制元素的顯示和隱藏,但是它們是有區別的。如果用v-if的話,整個dom結構壓根就不會出現在頁面上,如果是用v-show的話,要視後面的條件來定,如果是true,則顯示,如果為false,則加上style=”display:none”. 所以呢,如果是元件之類的大塊頭,個人覺得用v-if更好一些,如果是一些暫時性隱藏,一會要顯示的,還是v-show更方便。對於v-style和v-show來比較,v-show相當於是v-style=”display:none”和v-style=”display:block”的快捷方式。