Vue中的条件渲染v-if、v-show

最新推荐文章于 2025-05-27 14:36:04 发布

原创最新推荐文章于 2025-05-27 14:36:04 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了Vue.js中v-if与v-show指令的工作原理及应用场景，对比两者在元素显示与隐藏上的不同处理方式，并通过示例代码展示了如何利用这些指令实现页面元素的动态切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两个指令都是用于显示或者隐藏元素，其值都是为能够在JS执行环境中正确执行的表达式。

但是最终指令会将其转换为true或者false。拿v-if=""来说，其底层就是if(){}语句，""中传入的表达式就会放在()小括号内判断，最终得出true或false，这个就是JS的语法了。

为true时，v-if或v-show所在的标签隐藏；

反之为false时，v-if或v-show所在的标签显示。

写代码演示一下：

 <div id="box">
        <div v-if="true">1</div>
        <div v-if="flag">2</div>
        <div v-if="!flag">3</div>
        <div v-if="flag+111">4</div>
        <div v-show="true">5</div>
        <div v-show="flag">6</div>
        <div v-show="!flag">7</div>
        <div v-show="flag+111">8</div>
    </div>

    <script>
        new Vue({
            el:"#box",
            data:{
                flag:true
            }
        })
    </script>

看一下页面显示情况：

可以看到只有3和7没有显示在，其余的都显示了，就应证了我们前面所说的JS环境下解析表达式为true显示，false不显示。

同时我们看到v-if和v-show好像效果相同，那么它们的区别是什么呢？

我们可以在元素中看到区别：

v-if绑定的标签是被移除了，v-show绑定的标签是通过给行内添加display:none隐藏。

那这两个指令到底谁好呢？

既然他们同时存在，那么说明它们各有优势，各有适合的适用场景；

v-if 移除元素来切换模块，具有更高的渲染消耗常用在不常切换的业务;

v-show -css的隐藏元素(display:none)切换模块 -具有更高的内存消耗用于经常切换的业务。

我们在样式绑定的时候做了切换效果，这里学习了这两个指令也可以实现效果切换。

动手敲敲：

<style>
        .box11,.box12{
            width: 100px;
            height: 50px;
            background-color: darkcyan;
            text-align: center;
        }
        [v-cloak]{
            /* 解决第一次加载文字闪烁的问题 */
            display: none;
        }
    </style>
    <div id="box1">
        <button @click="change">点击切换页面</button>
        <div v-cloak v-if="flag" class="box11">{{msg}}</div>
        <div v-cloak v-if="!flag" class="box12">{{msg2}}</div>
    </div>
    <script>
        new Vue({
            el:"#box1",
            data:{
                flag:true,
                msg:"页面1",
                msg2:"页面2",

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

最开始flag为true,box11显示，box12移除，点击按钮触发事件后flag取反，box11移除，box12显示，再点再取反，就达到切换效果。

页面效果：