07-Vue分支结构

分支结构

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>
  
    <div v-else-if="type === 'B'">
       B
    div>
    <div v-else-if="type === 'C'">
       C
    div>
  
    <div v-else>
       Not A/B/C
    div>

<script>
    new Vue({
      el: '#app',
      data: {
        type: 'C'
      }
    })
script>

v-show 和 v-if的区别

• v-show本质就是标签display设置为none，控制隐藏
  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
• v-if是动态的向DOM树内添加或者删除DOM元素
  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件