html Vue条件渲染#tags：Vue

Posted 2021-05-11

<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>
<!-- if的元素可复用，禁止复用就加一个唯一的key属性 -->
<div v-show="ok">Hello!</div>
<!-- v-show的元素相比if始终渲染，不显示时为display:none; -->

优先级：
v-for > v-if
  <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
  </li>