v-if和v-show是我们项目开发中经常会遇到的两个指令，这两个指令有相似之处也有不同点，下面我就带领大家揭开它们的神秘面纱吧。
在我们做菜单的时候，我们看到这样的效果：点击菜单，二级菜单显示；再次点击菜单，二级菜单隐藏。它的原理就是如果二级菜单显示时，点击菜单，二级菜单消失；如果二级菜单隐藏时，点击菜单，二级菜单显示。从字面上看，我们可以联想到js中的if语句来实现，没错，在vue里，vue为我们提供了类似的指令---v-if指令，如何来应用它呢？
我们在数据项里设一个变量：
data() {
return {
content: "所有过往，皆为序章",
isOk: true
}
}
我们只要控制这个isOk，就可以控制文字的显示与隐藏，那么在dom里的结构是：
<template>
<div id="root">
<div v-if="isOk">{{ content }}</div>
<div class="button">toggle</div>
</div>
</template>
如果isOk为true，文字内容显示，如果isOk为false，文字内容隐藏。怎么来控制isOk这个变量值呢，我们需要给toggle按钮绑定一个事件，触发click事件时，通过函数来控制这个变量值。我们可以在dom里这样写：
<template>
<div id="root">
<div v-if="isOk">{{ content }}</div>
<div class="button" @click="toggle">toggle</div>
</div>
</template>
在js里的methods里这样写：
methods: {
toggle: function() {
this.isOk = !this.isOk
}
}
isOk为true时，内容是显示的，点击按钮，将isOk值取反变成false，内容就隐藏了，反之。这是一个小技巧。
我们再来看一下v-show，它同样也可以实现这样的效果。我们把v-if变成v-show，其它都不用变。
<template>
<div id="root">
<div v-show="isOk">{{ content }}</div>
<div class="button">toggle</div>
</div>
</template>
看页面效果，是一样一样的，似乎看不出有什么不同。如果观察一下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，不显示的时候直接将结点消除就好，当然也是从性能方面考虑。
就到这里了，休息休息一会儿吧：）
如果你喜欢本文，请分享到朋友圈，想要获得更多信息，微信公众号：duzhan99
