vue v-if v-else-if v-else 条件渲染

最新推荐文章于 2025-07-05 15:17:39 发布

原创最新推荐文章于 2025-07-05 15:17:39 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

33 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

本文深入探讨了Vue.js中v-if与v-show指令的区别及应用，解析了它们在条件渲染中的作用，包括如何根据条件展示或隐藏元素，以及在列表和模板中的配合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例1 
<div v-if="Math.random() > 0.5">
         Now you see me
    </div>
     <div v-else>
         Now you don't
     </div>
 
    <div v-if="num==10">
        num = {{num}}
     </div>
   <div v-else>
        num != 10     </div>

例2

<div v-if="message==='A'">
         str = {{message}}
     </div>
     <div v-else-if="message==='B'">
         str = {{message}}
     </div>
     <div v-else-if="message==='C'">
         str = {{message}}
     </div>
     <div v-else>
         str = null
     </div>

v-show & v-if

　v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

　　v-show 不支持 <template> 语法，也不支持 v-else。

　　两者之间的区别：

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

　　　　 2.是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做

　　　　 3.有很高的切换开销，适用于条件不太容易改变的时候

　　v-show:1.不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换

　　　　　 2.有很高的初始渲染开销，适用于非常频繁地切换

v-if 和v-for 混合使用示例

  <div v-for="message in messageList" v-if="message.test == 'vue.js'">
      {{message.test}}
    </div>
     <br>------------完美的分隔线--------------</br>

     <div v-for="message in messageList">
         <span v-if="message.test == 'vue.js'">{{message.test}}是一种很好用的前台框架</span>
         {{message.test}}
     </div>