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

最新推荐文章于 2024-08-05 10:19:59 发布

_Slience_

最新推荐文章于 2024-08-05 10:19:59 发布

阅读量2.1w

点赞数 1

分类专栏： Web前端

Web前端专栏收录该内容

94 篇文章 1 订阅

订阅专栏

来源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>