<div> <h4>v-if、v-else-if、v-else（分支）</h4> <span>分支示例：</span> <input type="text" v-model="number" /> <span v-if="number>10">大于10</span> <span v-else-if="number==10">等于10</span> <span v-else>小于10</span><br/> </div>
页面显示如下
当文本框里输入小于10的数字时，右侧只显示“小于10”的文本内容。
查看源码发现，只有“小于10”的内容的 span 标签存在，另外两个标签被插入到页面中。
同样，在输入大于10的数字时，右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。
v-show
该指令也是条件渲染指令，但是与上述的 v-if 有不同。这可以通过一个例子来说明。
<div> <h4>v-show（条件渲染）</h4> <span>v-show示例：</span> <input type="text" v-model="number" /> <span v-show="number>10">大于10</span> <span v-show="number==10">等于10</span> <span v-show="number<10">小于10</span><br/> </div>
将上面例子里的指令都换成 v-show ，页面显示如下
从页面显示的结果上看，没有任何区别。但是查看源码会发现，符合表达式结果判断的元素内容将被显示，不符合结果判断的元素将被隐藏，即被加上 display: none; 的样式。
从上面两个例子对比可以看出
v-if：动态插入或删除元素
v-show：动态显示或隐藏元素