条件渲染
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
更高的优先级