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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭