v-if,v-else-if,v-else与v-show

基本使用

v-if、v-else-if、v-else

   <template v-if = "false">雷天</template> //不渲染
   
   //和流程控制一样，只会进入第一个符合条件的渲染
   <div v-if = "true">晴天</div> //渲染
   <div v-else-if = "true">雨天</div> //不渲染
   <div v-else>阴天</div> //不渲染

v-show

	<template v-show="false">晴天</template> //渲染
	<div v-show = "true">雪天</div> //不渲染

v-if、v-else-if、v-else与v-show连用

    <div v-if = "true" v-show = "false">雾天</div> //不渲染
    <div v-if = "false" v-show = "true">雾天</div> //不渲染
    <div v-if = "true" v-show = "true">雾天</div> //渲染

原理

v-if,v-else-if,v-else遵循流程控制的规律，符合条件则在dom树中生成dom节点，节点包含其所有子节点。
v-show实际上控制的是元素的display属性值，如果条件为true则为display根据行元素和块元素分别取值为inline和block。
因此，当v-if、v-else-if、v-else与v-show连用的时候，会优先通过流程控制判断是否生成该dom节点，然后在用v-show判断该节点的display的取值。正因为此优先级，加上template元素不是实际渲染的元素，因此v-show不能控template元素的显隐，而v-if，v-else-if、v-else可以。

使用技巧

v-if，v-else-if、v-else控制显隐是通过在dom树中生成节点，如果频繁通过v-if，v-else-if、v-else来控制dom显隐的话就等于频繁的操作dom树，会很消耗性能。因此，当需要频繁控制显隐，应当使用v-show。而仅需要判断一次显隐的，例如根据不同权限显示不同模块类似这样的功能，就可以使用v-if，v-else-if、v-else较为恰当。