v-if v-show

  • 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>

猜你喜欢

转载自blog.csdn.net/zhumizhumi/article/details/82968741