2.4.4　v-show条件渲染

v-show指令与v-if有类似的能力，都可以通过布尔结果决定标签是否展示。与v-if不同的是，v-show不存在v-else-if的情况。要么显示，要么不显示。另外v-show修饰的标签是通过display：none来隐藏的，而v-if修饰的标签在判断为false的情况不会插入HTML文档中，因此当涉及频繁显示隐藏的元素时推荐使用v-show来修饰，这样可减少在条件切换时HTML标签频繁地创建和删除所带来的性能开销。

v-show指令的使用方式如下：

v-show的实际案例代码如下：

可以发现网页中会出现一个可以切换选中和取消的复选框，这里使用了v-model指令来对checkbox进行绑定，当选中checkbox时，show属性为true；当未选中checkbox时，show属性为false。这样网页中通过v-show绑定的div就会随着show值的变化而动态地切换显示和隐藏，代码运行结果如图2-6所示。

图2-6　v-show案例的运行结果

v-show的特性是通过CSS样式来切换元素显示和隐藏的，可以通过浏览器Web控制台中的Elements查看器查看本页加载的HTML文档的具体样式。当show为false时元素在网页中已经隐藏，但是它仍然存在于HTML文档对象中，它的隐藏是通过行内样式display：false实现的，如图2-7所示。

图2-7　v-show的渲染方式案例