# 显示和隐藏 >[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> ```