条件渲染 ——Vue.js

最新推荐文章于 2023-01-18 15:27:01 发布

叨唠

最新推荐文章于 2023-01-18 15:27:01 发布

阅读量211

点赞数

分类专栏： Vue 文章标签： Vue 条件渲染

本文链接：https://blog.csdn.net/zyz00000000/article/details/83657831

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

1. v-if 和 v-else

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

 <body>
     <div id="id">
        <h1 v-if="ok">Yes</h1>
        <h1 v-else>No</h1>
     </div>
     <script>
         var vm = new Vue({
             el:"#id",
             data:{
                 ok:true
             }
         })
     </script>
 </body>

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 的元素的后面，否则它将不会被识别。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

4. v-else-if，顾名思义，充当 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 的元素之后

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>

（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显示或者隐藏

叨唠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
条件渲染 ——Vue.js

1. v-if 和 v-elsev-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。 &lt;body&gt; &lt;div id="id"&gt; &lt;h1 v-if="ok"&gt;Yes&lt;/h1&gt; &lt;h1 v-else&gt;No&lt;/h1&gt;
复制链接

扫一扫

专栏目录