新玩家Vue笔记08

提示：该文章为笔者的个人笔记并不是权威，如有错误，谢谢指出。

---

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 

<h1 v-if="awesome">Vue is awesome!</h1>

 v-if 适合切换频率比较低的场景，v-if 为真时，会将不展示的DOM元素直接移除。

 也可以搭配v-else 使用

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

在<template> 元素上使用v-if 条件渲染分组

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

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

v-show 

v-show 适用于切换频率比较高的场景 ，v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

<h1 v-show="awesome">Vue is awesome!</h1>

---

总结

1. v-if可以和v-else-if，v-else一起使用，但不能被打断。

2. 使用v-if时，元素可能无法获取到，但v-show一定能获取到。