视频加载中…
v-if和v-show是我们项目开发中经常会遇到的两个指令，这两个指令有相似之处也有不同点，下面我就带领大家揭开它们的神秘面纱吧。 在我们做菜单的时候，我们看到这样的效果：点击菜单，二级菜单显示；再次点击菜单，二级菜单隐藏。它的原理就是如果二级菜单显示时，点击菜单，二级菜单消失；如果二级菜单隐藏时，点击菜单，二级菜单显示。从字面上看，我们可以联想到js中的if语句来实现，没错，在vue里，vue为我们提供了类似的指令—v-if指令，如何来应用它呢？ 我们在数据项里设一个变量： data() { return { content: \”所有过往，皆为序章\”, isOk: true } }我们只要控制这个isOk，就可以控制文字的显示与隐藏，那么在dom里的结构是：
{{ content }}
toggle
如果isOk为true，文字内容显示，如果isOk为false，文字内容隐藏。怎么来控制isOk这个变量值呢，我们需要给toggle按钮绑定一个事件，触发click事件时，通过函数来控制这个变量值。我们可以在dom里这样写：
{{ content }}
toggle
在js里的methods里这样写：methods: { toggle: function() { this.isOk = !this.isOk } }isOk为true时，内容是显示的，点击按钮，将isOk值取反变成false，内容就隐藏了，反之。这是一个小技巧。我们再来看一下v-show，它同样也可以实现这样的效果。我们把v-if变成v-show，其它都不用变。
{{ content }}
toggle
看页面效果，是一样一样的，似乎看不出有什么不同。如果观察一下dom结构，就会发现有大不同。我们首先看下v-if为false的情况下，dom结构如下：
我们再来看下v-show为false的情况下，dom结构如下：
显而易见，v-if和v-show的区别：v-if的显示和隐藏是在dom里创建和消除dom结点，而v-show是用css样式的display来控制dom结点的显示和隐藏。所以很容易我们就会知道什么时候用v-show，什么时候用v-if。像我们本案例中，会频繁地操作显示隐藏，用v-show是比较好的选择，如果用v-if频繁地创建结点消除结点，肯定影响性能的；如果项目中只显示隐藏一次，我们就可以用v-if，不显示的时候直接将结点消除就好，当然也是从性能方面考虑。
就到这里了，休息休息一会儿吧：）
如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注微信公众号：Web前端风暴
