vue学习记录（六）

条件渲染

v-if

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

<!-- Handlebars 模板 -->
{{#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是一个指令，必须要添加到一个元素上。如果想切换多个元素，可以把一个<template>元素当做不可见的包裹元素，在上边使用v-if。最终渲染结果将不包含<template>元素。

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

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

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

v-else-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>

显示

或者

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

v-show

根据条件展示元素选项的指令 ：

<h1 v-show="ok">Hello!</h1>

注意点：

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

v-if 和 v-show 对比：

v-if 

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

2，惰性的，如果在初始渲染时条件为假，没有反应，直到为真，才会开始渲染条件块。

v-show 

1，元素始终会被渲染并保留在DOM中。（只是简单地切换元素的CSS属性 display）

使用环境： 切换频繁 用 v-show，运行条件很少改变 用 v-if。

v-if 和v-for 一起使用：

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级