Vue条件渲染

1.v-if

使用场景

• 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
• 2- 进行两个视图之间的切换

	<div id="app">
            <!--  判断是否加载，如果为真，就加载，否则不加载-->
            <span v-if="flag">
               如果flag为true则显示,false不显示!
            </span>
    </div>
    
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true
            }
        })
    </script>
    
    ----------------------------------------------------------
    
        <div v-if="type === 'A'">
           A
        </div>
      <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->
        <div v-else-if="type === 'B'">
           B
        </div>
        <div v-else-if="type === 'C'">
           C
        </div>
      <!-- v-else紧跟在v-if或v-else-if之后-->
        <div v-else>
           Not A/B/C
        </div>
    
    <script>
        new Vue({
          el: '#app',
          data: {
            type: 'C'
          }
        })
    </script>

2.v-show

v-show 和 v-if的区别

• v-show本质就是标签display设置为none，控制隐藏
• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故频繁切换的情况下v-show性能更好一点。
• v-if是动态的向DOM树内添加或者删除DOM元素
• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
• 根据它们底层的设计不一样有各自的使用场景
  v-if具有较高的切换消耗,常常用在用户不常切换的模块
  v-show具有较高的性能消耗,常常用在频繁切换的模块中

3.隐藏元素相关属性

visibility: hidden; 不脱离文档流的，位置还在，在文档树
display:none 脱离文档流，位置不在，在文档树
v-if 删除节点
v-show display:none