11 v-if v-show

v-if v-show

v-if和v-show用于控制Dom元素的显示与否，以一段代码为例：

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

            }
        })
    </script>

此时点击button，两个h3便在显示与不显示的状态之间进行切换了。

但两者的原理有所不同，下面使用Chrome控制台进行讲述。

这是显示状态下：

这是非显示状态下：

于是我们就清楚了两者的不同：

• v-if控制下的Dom元素的显示与否是靠创建/删除元素进行的
• v-show控制下的Dom元素的显示与否是靠display:none属性的生成进行的
• 由于v-if每次都要重新创建/删除元素，所以切换性能消耗大，在flag为false的情况下，v-show会有较高的初始渲染消耗
• 如果元素涉及到频繁的切换，最好不使用v-if，如果元素永远不被显示，最好不使用v-show

以上。