Vue小侦探：v-if vs v-show，看你如何隐藏元素

你用 Vue 肯定见过v-if 和v-show？别小看了它们，能让元素藏起来。似乎差不多，但其实还是有区别滴。接下来给你仔细说说它们到底哪儿不一样，还准备了实例让你更直观地理解！

v-if与v-show的基本介绍

Vue.js那个v-if，就是个小侦探，看到表达式真假后决定要不要显示元素。真的？好嘞，那就放到DOM上；假的，就藏起来。但是注意用得多的话，可能速度会慢点。因为它每次都得让元素先藏起来，再放到新的位置。

v-if的应用场景

常用来干？看你是不是登录了呗，再给你不同反应。打比方说，假如你开网页看到已登录，网页就会蹦出来这句话：“你来了，名字！”但如果没有登录，或许就得让你赶紧去注册！这个时候用好v-if就可以搞定动态页面内容了哟。

这是一个被v-if控制的元素

碰到问题想躲起来？别慌，v-if能救你！比如上网买东西时，用它看看商品是不是还在货架上，没货就赶紧找别的。

v-show与v-if的区别

兄弟，其实V-show就是个可以看情况的导演，如果觉得场子不对头，他会帮你决定元素该穿什么不该穿什么，比如’display 外套’。这样就能让手机OTO看看他们。条件对了，就给元素穿上个”none”的西装遮起来；不妙，那就把衣服脱了赶紧溜。虽然V-show和v-if都是换状态，但这俩可是大不同！

v-show的应用场景

搞定了！只需要在音乐播放器里轻轻点下那个“music”按钮，就可以切换显示和隐藏播放列表。不仅如此，还能轻松换个颜色，而且不用修改DOM结构！

这是一个被v-show控制的元素

如何选择使用v-if或者v-show

经常用v-show真是不错，换页速度快！如果只是调整很少部分内容或想简简单单，就试试看v-if。用对这玩意儿，网页速度可提高不少，还不难学！

所以说，实际操作起来的时候，把这些指令和其他命令结合，那可是相当灵活多样！比如，用v-if加上下面这个叫做v-for的，这样就能搞定列表显示了。想弄个复杂的网页布局，别忘了这两个可都是你的得力助手~

结语

今天咱们就来说说Vue.js里的v-if和v-show命令。你们知道怎么用？怎么选择合适的用法？用得对的话，不仅页面加载更快，而且操作也更简单方便，以后维护也是事半功倍！

  

    
{{ item.name }}
  

希望这篇小短文能让你搞懂vue里面v-if和v-show有啥区别与怎么用。别忘了关注下Vue.js的各种实用技巧和实战经验。