- v-if: 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,开销较高,在运行时条件很少改变时使用。
- v-show:调整css dispaly属性,开销较小,在常频繁地切换时使用。
用于显示与隐藏各类元素,使用方式如下:
(1)v-if
<div v-if="isLogin">你好</div>
<div v-else>请登录后操作</div>
(2)v-show
<div v-show="isLogin">你好</div>
(3)v-else-if
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>