You know better Vue in v-if and v-show differences

The Vue v-if and v-show differences

1. v-if: every time delete and create elements, frequently operating DOM tree
2. v-show: DOM tree is not in operation, the switching element only display: none style

The main code demonstrates:

  <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,
        },
    })
    </script>
复制代码

When the results are as follows :( observe changes in the content of the red box) not click the button

Click on the button

Reproduced in: https: //juejin.im/post/5cefa2e1f265da1bcf5dc0df