vue中v-show和v-if在显示和隐藏元素上的区别

68 阅读 0 评论 45 点赞

我是靠谱客的博主完美糖豆，最近开发中收集的这篇文章主要介绍vue中v-show和v-if在显示和隐藏元素上的区别，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

来源https://www.imooc.com/video/16980

v-show将元素隐藏是在dom节点上加style=’display:none’
v-if是直接将元素完全去掉

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Vue入门</title>
    </head>

    <body>
        <div id="root">
            <!-- v-show改为v-if可以用来看v-if的情况 -->
            <div v-show="show">hello world</div>
            <button @click="handleClick">toggle</button>
        </div>
        <script type="text/javascript">
            new Vue({
                el: "#root",
                data: {
                    show: 0
                },
                methods: {
                    handleClick: function() {
                        this.show = !this.show;
                    }
                }
            })
        </script>
    </body>

</html>