vu e2.x内部指令

1.v-if 是 Vue.js 定义的指令，书写在 HTML 中，控制元素的渲染与否，示例代码如下。

<div v-if="true">
  <p>内容</p>
</div>

当v-if为false时

<p>内容</p>不显现

2.v-show也是控制元素渲染与否

两者的区别:

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

简单来说如果用 v-show，你在元素审查的时候发现这个元素实际是存在的，不过它的 CSS 样式中的 display 被设置为了 none，而 v-if，在不满足的时候它并不会去渲染这个元素，是真实的不存在。

v-if 减少了整个页面的元素节点，但是如果存在经常切换显示与否的状态，就需要使用 v-show，因为重新渲染或者销毁元素的消耗会远远大于简单的 CSS 样式隐藏与显示。