Vue | 07 条件渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/wudizhanshen/article/details/84246629

v-if的用法详解
v-show的用法
v-if与v-show的用法比较
v-if与v-for联合使用的建议

v-if

在字符串模板里，例如 Handlebars，我们像这样写一个条件模块：

<!-- Handlebars template -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}

在Vue我们使用v-if指令做相同的实现：

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

使用v-else去添加else语句块

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

在template上使用`v-if`

v-if可以实现给一个元素，但如果你想作用于多个元素，我们可以在元素上使用v-if做一个不可见的封装。最终渲染的结果不包含元素.

<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

New in 2.1.0+

v-else-if服务于v-if的否则如果语句块。可以连续写多个。

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    A
</div>
<div v-else-if="type === 'C'">
    A
</div>
<div v-else>
    Not A/B/C
</div>

类似于v-else，一个v-elese-if元素必须紧跟在v-if或v-else-if元素后面。

使用`key`控制复用元素

Vue为了尽可能高速的渲染元素，常常复用元素来代替从头渲染。这使得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>

填写输入框：
toggle-login-type-username
点击Toggle login type按钮切换输入框
toggle-login-type-email
切换loginType的时候已经录入的信息不会被擦除，因为两个模板使用相同的元素，没有被替换，仅仅替换了placeholder.

如果我们不复用他们，那么需要增加一个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>