> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/vue/07-tiao-jian-xuan-ran.md).

# 条件渲染v-if

## 1. v-if

**v-if**用于渲染一块内容，只有表达式返回结果为true，所修饰的标签才会被渲染

```javascript
<div v-if="awesome"></div>
//else 语块
<div v-else></div>
```

渲染一组模块，而不用写多个**v-if**语句

```javascript
<template v-if="ok">
        这里的内容都会被渲染
</template>
```

**v-else**则必须跟在**v-if**或者是**v-else-if**语句后面

## 2.使用key来管理复用

```javascript
<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>
```

当切换为其他登录方式时，input标签内的内容不会被清空；要使得两个input标签完全的独立的话，只需要添加一个key属性即可

```javascript
<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>
```

## 3. v-show

​ 与**v-if**用法类似，只不过v-show的实现原理是改变标签的内联属性display,

​ v-show不支持 元素进行一组模块的渲染，不支持v-else

**`v-show` vs `v-if`**

> `v-if` 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
>
> `v-if` 也是**惰性的**：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
>
> 相比之下，`v-show` 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
>
> 一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。

### 4.`v-if`与`v-for`

应该尽量避免两者的一同使用，**永远不要把 v-if 和 v-for 同时用在同一个元素上。**