v-if和v-show的使用和特点

  <DIV id="app">
        <input type="button" value="切换" v-on:click="handover">
    <p v-if="flag">我用的是v-if</p>
    <p v-show="flag">我用的是v-show</p>
    </DIV>
    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            handover(){
                this.flag=!this.flag
            }
        }
    })
    </script>

下面截图为flag切换为false时显示的DOM元素

v-if 每次切换都会重新删除或创建元素，有较高的切换性能消耗
v-show 每次进行切换，DOM元素都不会删除，只是在切换display的none和block属性值。所以有较高的初始渲染消耗

所以，如果元素涉及到频繁切换就用v-show
如果元素永远不会被显示出来被用户看到，可以使用v-if