条件渲染 ——Vue.js

怼烎@ 2022-04-22 05:50 363阅读 0赞

**1. v-if 和 v-else**

**`v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。**

**2.在 <template> 元素上使用 v-if 条件渲染分组**

template包裹多个标签，当template隐藏的时候，内部标签也隐藏。

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

因为 `v-if` 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 `<template>` 元素当做不可见的包裹元素，并在上面使用 `v-if`。最终的渲染结果将不包含 `<template>` 元素。

**3. v-else**

你可以使用 `v-else` 指令来表示 `v-if` 的“else 块”，**`v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面**，否则它将不会被识别。

**4. `v-else-if`，顾名思义，充当 `v-if` 的“else-if 块”，可以连续使用**

**类似于 `v-else`，`v-else-if` 也必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后**

**5. key值使元素不可复用**

**通常情况下，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，这样会使Vue变的非常快**，比如下面的例子中，**label和input是复用的，即在渲染的时候，他们不重新渲染，所以在切换的时候，input框内的内容不会被清除**

允许用户在不同的登录方式之间切换：

<div id="id1">
            <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>
              <button v-on:click="toggleLoginType">Toggle login type</button>
        </div>
        
        <script>
            var vm = new Vue({
                el:"#id1",
                data:{
                    loginType:'username'
                },
                methods: {
                    toggleLoginType:function(e){                   
                        if(this.loginType == 'username'){
                            this.loginType = ' '                   
                        }else{
                            this.loginType = 'username'
                        }
                    }
                }
            })  
        </script>

![20181105094953292.png][]

（2）不复用，只需添加一个具有唯一值的 `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` 属性

6. v-show：也是根据条件展示元素，不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中，`v-show` 只是简单地切换元素的 CSS 属性 `display`。

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

`v-if` 也是**惰性的**：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，`v-show` 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，`v-if` 有更高的切换开销，而 `v-show` 有更高的初始渲染开销。因此，**如果需要非常频繁地切换，则使用 `v-show` 较好；如果在运行时条件很少改变，则使用 `v-if` 较好。**

**v-if渲染或者不渲染，v-show显示或者隐藏**

[20181105094953292.png]: /images/20220422/3be8dc4bad934a3e8d6056f884e6bca0.png