vue基础课程学习之条件渲染（八）

# v-if

       v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候才能被渲染。当然也可以用v-else 添加一个“else 块”

点击“测试if else”按钮，会循环切换不同内容。

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

       因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并且在上面使用v-if。最终的渲染结果将不包含<template>元素。

注意：从上述两张图片（方框）中可以看出，在使用<template>元素时，最终的渲染不包含<template>元素，布局可以少一层渲染。而用其他元素也能达到UI效果，但是在渲染的时候会将该元素渲染出来，会多一个层级的渲染。

# v-else-if

       如果判断的条件有许多个，再之前的v-if与v-else组合使用就显的有些繁杂了，故而可以使用v-else-if指令来连续使用条件

根据type值的变化，显示数据也会更新。

注意：类似于v-else 、v-else-if也必须紧跟在带v-if指令或v-else-if指令的元素之后，不然会打断条件渲染。

#用key 管理可复用的元素

       Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使Vue变得非常之快，还有其他一些好处。例如，如果你允许用户使用不同的登录方式之间切换：

那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

在是用户名的情况下，输入用户名“XXXX”，之后在点击切换登录方式的按钮，切换后输入框的内容没有清空，即是input是被重新复用而没被渲染，效果不理想。

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 即可：

现在，每次切换时，输入框都将被重新渲染。

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

<label> 标签为 input 元素定义标注（标记），label 元素不会向用户呈现任何特殊效果。

v-show

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

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

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

v-if 与 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 更高的优先级

最后是交流公众号，大家可以关注一下