v-show也是條件渲染指令，不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。和v-if指令不同點在於：v-show是根據表達式之真假值，切換元素的 display CSS 屬性，當條件變化時該指令觸發過渡效果。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> v-show </title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 用法:根據表達式的值的真假條件渲染元素. 在切換時元素及它的數據綁定/組件被銷毀並重建. --> <p v-show="show">要顯示出來</p> <p v-show="hide">不要顯示出來</p> <!-- 大於170的顯示,否則不現實 --> <p v-show="height>170">Apollo的身高:{{ height }}CM</p> <p v-show="height>150">Jack的身高:{{ height }}CM</p> </div> <script> // 創建Vue的實例 let app = new Vue({ el: '#app', data: { show: true, hide: false, height: 168 } }) </script> </body> </html>
v-show和v-if的區別：
v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件； v-show 則只是簡單地基於 CSS 切換。
v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。