v-if与v-show

〆﹏为你伏笔

已于 2022-05-27 13:58:53 修改

阅读量78

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-05-24 19:18:34 首次发布

本文链接：https://blog.csdn.net/Q2159621453/article/details/124952598

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、v-if

<body>
    <div id="app">
        <div v-if="age < 18">未成年</div>
        <div v-else-if=" age < 60">青壮年</div>
        <div v-else>暮年</div>
    </div>

    <script>
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    age:22
                }
            }
        })
    </script>
</body>

只会显示符合条件的代码。（动态的向DOM树中添加或删除DOM元素）

2、v-show

<body>
    <div id="app">
        <div v-show="isshow">显示</div>
    </div>

    <script>
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    isshow : false
                }
            }
        })
    </script>
</body>

通过display来控制显示与隐藏

总结：v-if不符合条件的会直接删除，符合时需要重新加载，而v-show则通过display控制。

所以反复开关一个东西用v-show因为他几乎不影响性能

优惠劵

〆﹏为你伏笔

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if与v-show

1、v-if<body> <div id="app"> <div v-if="age < 18">未成年</div> <div v-else-if=" age < 60">青壮年</div> <div v-else="age <80">暮年</div> </div> <script>
复制链接

扫一扫