在我们的开发过程中，控制一个元素的显示与隐藏是最常见、最简单的功能之一了， 举个最简单的例子， 现在有一个超级英雄叫 托尼·史塔克， 下面有一段他的简介，内容很多，默认状态下是不显示的，然后点击一个按钮后才显示简介。

在vue有一个控制元素显示隐藏的指令，v-if，

这里我们v-if绑定了一个数据showDetail，一般是boolean型的值，如果这个值是true时，这个div就显示，如果showDetail为false时，div就隐藏。所以要控制元素的显示与隐藏，我们只要改变showDetail这个值就行了。

下面是完整的代码

托尼·史塔克（Tony Stark）即初代钢铁侠（Iron Man）...

跟之前一样，showDetail是data中的一个数据，在点击按钮时，我们给this.showDetail取反，就是如果是true，就设置为false，如果是false，就设置为true 跟随着showDetail的变化，简介这个p元素也随着显示隐藏。

在vue中还有另外一个控制显示隐藏的指令v-show， 我们把代码中v-if换成v-show同样可以实现相同的效果，那么它们有什么不同，打开开发者工具，我们找到显示隐藏的p标签，对比一下就发现了 如果使用v-if，在showDetail这个值是false时，dom里就没有这个元素了 如果使用v-show，在showDe这个值是false时，这个p标签在dom里还有，只是它的dispaly属性变成了none，所以就不显示了。

那在实际工作中，我们要认真区分v-if和v-show的使用 规则也很简单 如果一个元素在确定要显示或者隐藏后，就不再变化了，使用v-if 如果一个元素可能会频繁的切换显示隐藏，使用v-show

这节课的内容就是这些了，动手写一写，记得更清楚。