v-if和v-show的使用

1.v-if的特点:每次都会重新删除或创建元素,如何涉及的元素的频繁切换,则推荐不要使用v-if,而是推荐使用v-show,如果元素可能永远不会显示出来给用户看到,这推荐使用v-if
2 .v-show的特点:每次都不会进行DOM的删除和创建操作,只是切换了元素的display:none的样式

 <input type="button" value="toggle" @click="toggle">
        <p v-if="flag">这是v-if控制的元素</p>
        <p v-show="flag">这是v-show控制的元素</p>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true,

        },
        methods:{
            toggle(){
                this.flag=!this.flag;
            }
        }
    });
</script>

猜你喜欢

转载自blog.csdn.net/qq_39239110/article/details/87823307