vue2.x学习笔记（七）

Z时代
2024-01-10
分类：综合

vue

接着前面的内容：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】指令大致相同。