Vue3+.net6.0 六 条件渲染

v-if，v-else-if，v-else

控制元素是否渲染，不满足条件的时候不会有相应元素。

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

用法很简单，需要注意的就是一定要放在元素上。

如果需要同时控制多个元素，就用<template>模板标签。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

效果上和v-if一样，但是是控制元素是否显示，也就是display

<h1 v-show="ok">Hello!</h1>

v-if和v-show的选择

我个人觉得，如果元素需要频繁控制展示/隐藏，首选v-show，如果是页面初始化时就能确认元素是否要渲染了，用v-if。

比如展开/收起 这种操作，当然选v-show，但如果是根据数据的状态展示不同的信息，用v-if控制。

v-if和v-for

v-if的级别比v-for高，也就是说如果一个元素上两个都有，会先执行v-if。