Vue——条件渲染

目录

v-if​

v-else​

v-else-if​

template 上的 v-if​

v-show​

v-if vs. v-show​

v-if 和 v-for

---

v-if​

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

Vue is awesome!

v-else​

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

Toggle

Vue is awesome!
Oh no 

 

 

 一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

v-else-if​

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

  A


  B


  C


  Not A/B/C

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

template 上的 v-if​

因为 v-if 是一个指令，他必须依附于某个元素。但如果我们想要切换不止一个元素呢？在这种情况下我们可以在一个