vue学习201005：v-if和v-show的使用_vue 改变show会重新初始化吗-优快云博客

本文介绍了Vue中v-if和v-show的特性与区别。v-if每次切换时会销毁和重建元素，适合不频繁切换且初始化成本可接受的情况；v-show则仅改变元素的display样式，适用于频繁切换但首次渲染性能要求高的场景。根据具体需求选择合适的方法，以优化应用性能。

v-if的特点：每次都会重新删除或创建元素，有较高的切换性能消耗
v-show的特点：每次不会重新进行DOM的删除和创建，只是切换 display:none 样式，有较高的初始渲染消耗

如果涉及频繁的切换，最好不要使用，推荐使用v-show
如果元素可能永远也不会被显示出来，则推荐使用v-if

<div id="app">
        <!-- 直接在@click里写方法可以不用this. 因为直接写会直接去data里找 -->
        <input type="button" value="toggle" @click="flag = !flag">

        <!-- v-if的特点：每次都会重新删除或创建元素-->
        <!-- v-show的特点：每次不会重新进行DOM的删除和创建，只是切换 display:none 样式 -->

        <!-- v-if  有较高的切换性能消耗  如果涉及频繁的切换，最好不要使用，推荐使用v-show-->
        <!-- v-show  有较高的初始渲染消耗  如果元素可能永远也不会被显示出来，则推荐使用v-if-->
        <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>