v-if只會在知足條件時纔會編譯,而v-show無論是否知足條件始終會編譯,v-show的顯示與隱藏只是簡單的切換CSS的display屬性。 也就是說,在使用v-if時,若值爲false,那麼頁面將不會有這個html標籤生成。而v-show:不論其值是false仍是true,html元素都會存在,只是簡單的切換css的display屬性。
通常來講,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。所以,若是須要頻繁切換 v-show 較好,若是在運行時條件不大可能改變 v-if 較好。
1.v-if 指令能夠應用於template包裝元素上,而v-show不支持template 2.將v-show應用在組件上時,由於指令的優先級 v-else 會出現問題,解決辦法就是用另外一個 v-show 替換 v-else // 錯誤 <custom-component v-show="condition"></custom-component> <p v-else>這可能也是一個組件</p> // 正確作法 <custom-component v-show="condition"></custom-component> <p v-show="!condition">這可能也是一個組件</p>
v-cloak指令和css規則如[v-cloak]{display:none}一塊兒用時,這個指令能夠隱藏未編譯的Mustache標籤直到實例準備完畢。 v-cloak 指令能夠像css選擇器同樣綁定一套css樣式而後這套css會一直生效到實例編譯結束。 eg: // <div> 不會顯示,直到編譯結束。 [v-cloak]{ display:none; } <div v-cloak> {{ message }} </div>
vue中咱們會將數據包在兩個大括號中,而後放到HTML裏,可是在vue內部,全部的雙括號會被編譯成textNode的一個v-text指令。
而使用v-text的好處就是永遠更好的性能,更重要的是能夠避免FOUC (Flash of Uncompiled Content) ,也就是上面與遇到的問題。css
eg: <span v-text="message"></span> <!-- same as --> <span>{{message}}</span>