[前端暴龙机，Vue2.x 进化 Vue3 ] Day10.条件渲染

当我们有区分，在某种条件下看到的会是 A 画面，某一些条件下看到的会是 B 画面...的情形，例如每个会员权限不同所可以使用的功能不同就是一个简单的例子，这时就可以使用条件渲染

条件渲染

Vue 的条件渲染逻辑跟 Javascript 很相似，所以会有 v-if、v-else-if、v-else可以使用
v-if 跟 v-else-if 後面通常会加上 条件式 来控制该 html 元素 是否要被显示

<div id="app">
    商品出清 $99 
    <p v-if="proMember">高级会员价 只要 $29</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            proMember: false
        }
    })
</script>

因为 proMember 为 false，所以不会显示出高级会员价

• v-if 後面可以接 v-else-if 或 v-else，不过 v-else 就不需要接条件了，但是 v-else 需与 v-if 一起使用
• v-if、v-else-if、v-else 可以连用，就会像是 Javascript 的写法

条件渲染的分组

所有 html 标签 都可以加上 v-if，但渲染时 html 标签 也会被渲染出来，所以当不希望有额外多余的 div 标签，就可以使用 <template> 元素作为分组，<template> 元素不会像 div 标签被看见

<div id="app">
    <template v-if="isShow">
        <h1>NOT show</h1>
    </template>
    <template v-else="isShow">
        <h1>Show</h1>
    </template>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false
        }
    })
</script>

如图，可以看到并不会出现 <template> 标签

看似一样，却又不一样的 v-show

另外一个跟 v-if 一样，可以用来控制可显示或不显示的功能 v-show
虽然功能差不多，但实际运作的方式却不同

v-if : 如果为 false ，不会看到任何程序码
v-show : 如果为 false，虽然画面不可见，但是程序码可见

<div id="app">
   <div v-if="isShow">我是v-if</div>
   <div v-show="isShow">我是v-show</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isShow: false
        }
    })
</script>

如图，可看到 v-show，仅仅只是透过 css 的方式，隐藏画面显示，所以程序码还是可见的
但是 v-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>

即使切换 loginType ，使用者输入的内容却不会被清除，因为相同的模板使用了相同的元素 <input>，所以 <input> 并不会被换掉，仅仅替换了 placeholder 的内容

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

如图，这两个 <input> 就个别被独立出来了，所以当作切换时，输入框内容也会被清除

参考资料

Vue 官方文件 - 条件渲染