v-if指令可以控制一个元素的显示和隐藏，那么它是如何实现的？它和看起来很像的v-show指令有什么区别呢？如果v-if指令的值为假，那么这个元素不会被插入DOM。下面的Vue模板

    <div v-if="true">one</div>
    <div v-if="false">two</div>

会输出如下内容：

    <div>one</div>

和v-show指令比较一下，该指令使用CSS样式控制元素的显示/隐藏。

    <div v-show="true">one</div>
    <div v-show="false">two</div>

会展示如下的结果

       <div>one</div>
    <div style="display: none">one</div>

首先，因为使用v-if隐藏的内部元素不会被显示，Vue不会尝试生成对应的HTML代码；而对于v-show指令，事实并非如此。这意味着隐藏尚未加载的内容时，v-if指令更好一些。

由上述我们可以知道两者的基本区别和使用方法