Vue_v-if and v-show use and features

In general, v-if higher switching consumption v-show higher initial rendering consumption. So, if you need frequent switching v-show is better, if the conditions are unlikely to change at runtime v-if better

<div id="app">
    <input type="button" value="toggle" @click="toggle">
    <h3 v-if="flag">这是用v-if控制的元素</h3>
    <h3 v-show="flag">这是用v-show控制的元素</h3>
</div>

var vm=new Vue({
    el:"#app",
    data:{
        flag:true
    },
    methods:{
        toggle(){
            thsi.flag=!this.flag;
        }
    }
});

After clicking h3 can find two elements disappeared, but open the Developer Tools can see the difference between the two: Write a v-show statement <h3 & gt label in the Show will find within its label written style property, which show v-show is written inline styles by the tag "display: none;" to hide elements. The position of the v-if statements into an empty comment statement, which indicates that the original h3 element is replaced

• v-if achieved by hiding the effect of DOM operations. v-show just to achieve the effect by changing the style attribute to hide the value of the display.