vue 的条件渲染

学习最好的方法就是把你知道的告诉别人！

条件渲染：通过条件来控制是否要渲染一块内容。

一、v-if

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

还可以有else：

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

它们必须相互紧跟，不然无法生效。

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

假如我们想通过v-if来切换多个元素，可以使用<template>元素来包裹，在它上面使用v-if：

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

2、v-else

我们可以使用v-if的v-else，例子如下：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

注意：v-else 必须紧跟v-if后面，否则将不会被识别。

3、v-else-if

没错，就跟js的if 、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>

4、用 key 管理可复用的元素

在vue里面的元素，都会尽它所能复用已有的元素，而不是重新渲染，例子如下：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

但是在有些场景下，我们不总是希望复用原来的元素，需要让它们彼此独立，我们只需要添加一个key属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

现在，每次切换时，都会重新渲染，因为他们的key值不同，<label>会复用，因为它没有设置不同的key。

二、 v-show

v-show 也是根据条件来展示元素，跟v-if用法一样：

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

v-show始终会渲染并保留在DOM中的，它只是简单的对css属性的display切换。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

三、v-if 和 v-show之间的区别

1. v-if:

• 只有条件为真时，元素才会真正渲染到DOM上，同时确保切换过程中，条件块内的事件、子组件都会被销毁和重建。
• 它也是惰性的，条件为假时，它什么也不做，

2. v-show:

• v-show不管条件是什么它都会被渲染到DOM上，并且只是对CSS属性的display进行切换。

结论：使用v-if会有更大的切换开销，而v-show则初始会有更高的开销，如果频繁的对元素条件进行切换，建议使用v-show，否则使用v-if较好。

四、不建议v-if 与 v-for 一起使用

具体请看https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if