# 顯示和隱藏 >[info] v-if指令和v-show指令，**輸入的是布爾值，true顯示，false隱藏**，但是**v-if指令是直接銷毀所在的標簽**，達到隱藏的效果，**v-show指令則是在所在標簽上增加一個style display：none** 達到隱藏的效果 ***** >[danger]**注意** 若是頻繁控制顯示和隱藏，建議使用v-show，不建議使用v-if，耗費性能 ``` <div id="app"> <p>{{a}}</p> <!-- 顯示 --> <p v-if="b">bool：{{a}}</p> <!-- 隱藏 --> <!-- 除了 undefined null “” NaN 0 外，其余的布爾值都是true --> <p v-if="bool">bool1:{{a}}</p> <p v-if="0">bool5:{{a}}</p> <!-- 顯示 --> <p v-if="bool == false">bool2:{{a}}</p> <p v-if="1">bool3:{{a}}</p> <p v-if="!bool">bool4:{{a}}</p> <p>===========v-show</p> <!-- 顯示 --> <p v-show="b">show1:{{a}}</p> <!-- 隱藏 --> <p v-show= "bool">show2:{{a}}</p> </div> <script> new Vue({ el: "#app", data: { a: "世界，你好", bool: false, b: 1, } }) </script> ```