曹可爱之最可爱-Vue.js入门（六）条件渲染

条件渲染

---

v-if指令

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

---

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

因为v-if是一个指令，所以必须把它添加到一个元素上，

如果想切换多个元素呢？
可以把一个< template >元素当作不可见的包裹元素，并在上面使用v-if。最后的渲染结果将不包含< template >元素

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

---

v-else

使用v-else指令来表示v-if的”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或者v-else-if的元素后面，否则将不会被识别。

---

v-else-if

充当v-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>

---

用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>

Vue提供了一种方式来表达”这两个元素是完全独立的，不要复用它们。”只需添加一个具有唯一值的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>

---

v-show

根据条件展示元素的选项是v-show指令，不同的是**带有v-show的元素始终会被渲染并保留在DOM中。**v-show只是简单地切换元素的CSS属性display.

<h1 v-show="ok">hello</h1>

---

v-if VS v-show

v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
同时，v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做–直到条件第一次为真，才会开始渲染条件块。

相比之下，v-show就简单得多–不管初始条件是什么，元素总是会被渲染，并且只是简单的基于CSS进行切换。

一般来说：v-if有更高的切换开销，而v-show有更高的初始渲染开销。

---

v-if与v-for一起使用

v-for具有比v-if更高的优先级。

---

总结：条件渲染这边没什么好说的啦 ～就是像之前学过的if-else语句，学会写法和用法就好啦。但是还有一点，像例子中< template >包裹的if时可以进行用户在不同的登录方式之间的切换就很灵活。总之呢～ 能巧妙的应用才是真本事，加油啦！！！