让你更了解Vue中v-if和v-show区别

Vue中v-if和v-show区别

1. v-if：每次都会删除和创建元素，频繁地操作DOM树
2. v-show：不进行对DOM树的操作，只切换元素的display:none样式

主要代码演示：

  <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>

结果如下：（注意观察红框中的内容变化）
未点击 按钮时

点击按钮后