v-if 条件渲染

<div id="app">
  <p v-if="mode == 1">Showing v-if directive content</p>
  <p v-else-if="mode == 2">v-else-if</p>
  <p v-else>v-else</p>
</div>

通过使用 v-if 属性可以实现满足条件时才会显示对应属性。 且其他不满足条件的属性也不会被html渲染。

v-if 和 v-else-if 需要在一个层级内且相邻才能生效，如果是中间隔了其他元素将会出现报错。而对于一个 v-else-if 内有多个元素要显示时，我们只能将该属性放置在外部盒子中：

<template v-else-if="mode == 2">
  <p >v-else-if</p>
  <p >another paragraph</p>
</template>

使用 template 标签的好处是，浏览器会自动将该盒子去掉，只保留其中的内容，会让 html 层级更简洁些：