Vue-条件渲染

1.v-if

v-if用于条件性地渲染一块内容。后边跟的依旧是一个js表达式，这个表达式的返回值决定了这块内容是否会被真实地挂载到页面上。
（这块内容只会在指令的表达式返回 truthy 值的时候被渲染）

<div v-if="show">Hello World</div>

也可以用 v-else 添加一个“else 块”，不过一定要连写在一起使用：
<div v-if="show">Hello World</div>
<div v-else>Bye World</div>

或者添加v-else-if，充当 v-if 的“else-if 块”，可连续使用：
（v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后）
<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>

用 key 管理可复用的元素
Vue 为了高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

<div v-if="show">
  Username：
</div>
<div v-else>
  Email：
</div>
那么在上面的代码中切换show的真值将不会清除用户已经输入的内容。
因为两个模板使用了相同的元素，vue会尽可能复用，输入框的值不会被替换掉。


这样也不总是符合实际需求，所以有一种方式来表达“这两个元素是完全独立的，不要复用它们”。
只需添加一个具有唯一值的key即可：
<div v-if="show" key="username-input">
  Username：
</div>
<div v-else key="email-input">
  Email：
</div>
现在，每次切换时，输入框都将被重新渲染。

2.v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

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

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 的display属性

v-if 和v-show的区别

1. v-if 是惰性的，只有当条件第一次变为真时，元素才会存在并渲染。
2. v-show 不管初始条件是什么，元素总是会被渲染，即便条件为假，也是渲染了display为none的css属性。
3. v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

ps：不推荐同时使用 v-if 和 v-for