【Vue.js】Vue官方文档学习-根据条件进行渲染

一、v-if

基本结构

v-if
v-else
v-else-if

    <div id="app1">
        <h1 v-if="type === 'A'">A</h1>
        <h1 v-else-if="type === 'B'">B</h1>
        <h1 v-else-if="type === 'C'">C</h1>
        <h1 v-else>非A/B/C</h1>
    </div>
----------
    var app1 = new Vue({
        el: '#app1',
        data: {
            type: 'C'
        }
    })

在< template >上使用v-if进行条件分组

可以将 < template > 元素作为多个元素的无形容器，然后在这个容器上使用 v-if。
最终渲染结果将不会包含 < template > 元素。

<template v-if="ok">
  <h1>标题</h1>
  <p>段落 1</p>
  <p>段落 2</p>
</template>

使用key控制元素是否可复用

不同值的key属性：这两个元素是完全独立的 - 请不要复用它们。

<template v-if="loginType === 'username'">
  <label>用户名</label>
  <input placeholder="请输入用户名" key="username-input">
</template>
<template v-else>
  <label>邮箱</label>
  <input placeholder="请输入邮箱" key="email-input">
</template>

二、v-show

具有 v-show 的元素会始终渲染并保留在 DOM 中。
v-show 只会切换元素的 display 这个 CSS 属性。
v-show 无法用于 < template > 元素。
也不能和 v-else 配合使用。

<div id="app4">
        <p v-show="ok">看得见我哟</p>
    </div>

三、v-if和v-show的区别

v-if 是“真实”的条件渲染：会确保条件块在切换的过程完整地销毁和重新创建条件块内的事件监听器和子组件。
v-if 是惰性的：如果在初始渲染时条件为 false，它不会执行任何操作 。在条件第一次变为 true 时，才开始渲染条件块。

v-show ：不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。

v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。
如果需要频繁切换，推荐使用 v-show。
如果条件在运行时改变的可能性较少，推荐使用 v-if。

四、v-if和v-for一起使用

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