v-show和v-if

<div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <h3 v-if="flag">这是v-if控制</h3>
        <h3 v-show="flag">这是v-show控制</h3>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
        }
    })
    </script>

v-if

特点：每次都会重新删除和增加元素，有较高的性能切换消耗，如果需要永远删除元素的话，提倡使用v-if

 

v-show

特点：每次不是删除和增加元素，而是改变元素的display属性，在频繁切换的时候推荐使用