如何利用vue进行条件渲染

vue的条件渲染

v-if

v-if指令可以插入和删除所命令的模板

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

data:{
    ok:true
}

输出HTML

Yes

当我们更改 ok 为 false时
我们会发现页面的 Yes 消失，在控制台里面会发现 h1 标签也已经消失。

v-else-if 和 v-else

我们知道 js 里面有 if 判断语句是 if 和else if 和 else 配合使用，所以 vue 也为我们提供了一个 v-else-if 和 v-else 指令与 v-if 配合使用,但是 v-else-if 和 v-else 必须紧跟在 v-if 或者 v-else-if 元素之后。

比如我们做一个小例子来演示一下,假设ok>=90,我们显示优秀，ok>=60时，显示及格，OK<60时，显示不及格。

<h1 v-if="ok>=90">优秀</h1>
<h1 v-else-if="ok>=60">及格</h1>
<h1 v-else="ok<60">不及格</h1>

data:{
    ok:100
}

当我们更改ok的值为 100 ，80 ， 40 时，我们会发现页面所显示的依次是 优秀 ， 及格 ， 不及格。

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

data:{
    ok:true
}

输出HTML

Title
Paragraph 1
Paragraph 2

我们在控制台会发现< template > 元素真的并没有渲染，而当我们更改 ok 为 false ，我们会发现页面所有内容全部消失。

v-show

v-show也是根据条件控制元素的显示，用法与 v-if 相同，但是 v-show 与 v-if 不同的是，v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-show 不支持 < template > 语法，也不支持 v-else

v-if VS v-show

• v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

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

• 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-if 和 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的 一些 项渲染节点时，这种优先级的机制会十分有用

<ul>
    <li v-for="item in todo" v-if="item.ok">{{item.text}}</li>
</ul>

data:{
    todo:[
        {text:1,ok:true},
        {text:2,ok:true},
        {text:3,ok:true},
    ]
}

当 ok 为 true 时，输出为

1
2
3

当我更改 data 里面第二的 ok 的值为 false 时，会输出

1
3

这是先进行 v-for 的渲染，然后在进行 v-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>

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求，所以 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>

注意，<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。