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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chinafire525/article/details/84032892

例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>