一、v-if指令

v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。

如果表达式的值为true，就输出DOM元素及其包含的子元素；否则，就将DOM元素及其包含的子元素移除。

二、v-show指令

v-show指令是根据表达式的值来判断是显示还是隐藏DOM元素。

当表达式的值为true时，元素将被显示；

当表达式的值为false时，元素将被隐藏，此时为元素添加了一个内联样式style="display:none"。

与v-if指令不同，对于使用v-show指令的元素，无论表达式的值为true还是false，该元素始终会被渲染并保留在DOM中。

绑定值的改变只是简单地切换元素的CSS属性display。

注意：v-show指令不支持<template>元素，也不支持v-else指令。

三、<template>判断一组元素

如果要对一组元素进行判断，则需要使用<template>元素作为包装元素，并在该元素上使用v-if，最后的渲染结果里不会包含<template>元素

<template v-if="show">
    <input type="radio" value="手机" />手机
   <input type="radio" value="电脑" />电脑
</template>

四、如何选择v-if和v-show

在进行v-if切换时，因为v-if中的模板可能包括数据绑定或子组件，所以Vue.js会有一个局部编译／卸载的过程。而在进行v-show切换时，仅发生了样式的变化。因此从切换的角度考虑，v-show消耗的性能要比v-if小

v-if是惰性的，在初始条件为false时，v-if本身什么都不会做，而使用v-show时，不管初始条件是真是假，DOM元素总是会被渲染。因此从初始渲染的角度考虑，v-if消耗的性能要比v-show小。

区别：

v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。