v-if和v-show的使用和特点

v-if的特点是每次都会重新删除或创建操作

v-show的特点是每次不会进行DOM的删除和创建操作，只是切换了元素的display:none样式

<div id="app">

        <input type="button" value="按钮"  @click="btn">

        <h1 v-if="flag">这是用v-if控制的元素-if<h1>

        <h1 v-show="flag">这是用v-show控制的元素<h1>

            <h1 v-if="flag">sfasdfa</h1>

    </div>

    <script>

        var vm = new Vue({

            el: '#app',

            data:{

                flag: true

            },

            methods:{

                btn(){

                    this.flag=!this.flag

                }

            }

        })

    </script>

v-if 有较高的切换的性能消耗

v-show有较高的初始渲染消耗

如果元素涉及切换的频繁，最好不要使用v-if

如果元素可能永远不会被显示出来被用户看到，则推荐使用v-if