vue2.x学习笔记（七）

接着前面的内容：https://www.cnblogs.com/yanggb/p/12576797.html。

条件渲染

vue也提供了一些指令，用于条件性地渲染模板中的内容。

【v-if】和【v-else】指令

【v-if】指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值得时候被渲染。

<h1 v-if="handsome">yanggb is handsome!</h1>

也可以配合使用【v-else】指令添加一个else块。

<h1 v-if="handwome">yanggb is handsome!</h1>
<h1 v-else>oh no 😢</h1>

要注意的是，带【v-else】指令的元素必须要紧跟在带【v-if】或【v-else-if】指令的元素后面，否则它是不会被识别的。

【v-else-if】指令

【v-else-if】指令是2.1.0新增的，顾名思义就是充当【v-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】指令，带【v-else-if】指令的元素也必须紧跟在带【v-if】或【v-else-if】的元素之后。

在<template>元素上使用【v-if】条件指令进行渲染分组

因为【v-if】是一个指令，所以必须将它添加到一个dom元素上。但是如果想要切换多个元素的话，就可以使用一个<template>元素当作一个不可见的包裹元素，并在上面使用【v-if】指令，这样的做法就相当于分组了。而且，最终的渲染结果也不会包含<template>元素，因为它只是模板的一部分，在渲染时会通通去除。

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

当ok为false的时候，这一整块内容都不会在页面上出现。

使用key来管理可复用的元素

vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使得vue变得更加快之外，还有其他的一些好处。

比如你想要通过loginType属性去控制用户在不同的登录方式之间切换：

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

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

但是这样的实现也不总是符合实际需求，因此vue还提供了去除这种【类缓存性】的方式，要点在于告诉vue：这两个元素是完全独立的，不要复用它们，而开发者需要做的也仅仅是添加一个具有唯一值的key属性而已。

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

这样的话，每次切换时输入框都会被重新渲染，这在某一些特殊得场景中可能会应用得上。

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

【v-show】指令

vue还提供了另一个根据条件展示元素的指令【v-show】，用法和【v-if】指令大致相同。

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

与【v-if】指令不同的是，带【v-show】指令的元素始终会被渲染并保留在dom中，因为【v-show】指令的底层实现其实只是简单地切换css属性display而已。

特别要注意的是，【v-show】指令是不支持<template>元素的，更不支持【v-else】指令的配合使用。

【v-show】指令vs【v-if】指令

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

2.【v-if】指令是惰性的：如果在初始渲染时条件为假，则什么都不做，直到条件第一次变为真的时候才开始渲染条件块。相比之下，【v-show】指令则是简单得多，不管初始的条件是什么，元素都总会被渲染，并且只是简单地基于css进行显示隐藏切换而已。

3.一般来说，【v-if】指令拥有更高的切换开销，而【v-show】则有着更高的初始渲染开销。因此，如果需要非常频繁地切换，则是使用【v-show】指令比较好；如果在运行时条件很少改变的话，则是使用【v-if】会比较好。

【v-if】指令和【v-for】指令一起使用

当【v-if】指令与【v-for】指令一起使用的时候，【v-for】指令会拥有比【v-if】更高的优先级，这样的特性可能会导致这两个指令一起使用的时候产生出乎意料的结果。因此，建议是尽量避免同时使用这两个指令。

 

"我还是很喜欢你，像断崖卷起千堆雪，岁岁如夕。"