sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  1796 随笔 :: 22 文章 :: 24 评论 :: 226万 阅读
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
Vue显示隐藏（v-show，v-if）v-show="show"

Vue显示隐藏（v-show，v-if）
https://www.cnblogs.com/antao/p/12564235.html

1.v-show

直接上示例：

复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <button @click="toshow()">显示/隐藏</button>
            <p>v-show：<span v-show="show">{{text}}</span></p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                text: "我要显示呀",
                show: false
            },
            methods: {
                toshow: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</html>
复制代码
复制代码

v-show为false运行以后在浏览器看到的是这样的

<div id="box">
    <button>显示/隐藏</button>
    <p>v-show：<span style="display: none;">我要显示呀</span></p>
</div>

v-show 的元素会始终被渲染并保存在 dom 中，它只是简单的切换 css 的 dispaly 属性。

 

2.v-if

把v-show改为v-if再看：

复制代码
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-if指令</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <button @click="toshow()">显示/隐藏</button>
            <p>v-show：<span v-if="show">{{text}}</span></p>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#box",
            data: {
                text: "我要显示呀",
                show: false
            },
            methods: {
                toshow: function() {
                    this.show = !this.show;
                }
            }
        })
    </script>
</html>
复制代码
复制代码

v-if为false运行以后在浏览器看到的是这样的

复制代码
复制代码
<div id="box">
    <button>显示/隐藏</button>
    <p>v-show：
        <!---->
    </p>
</div>
复制代码
复制代码

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。

 

3.总结

v-show总结

1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

v-if总结

1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。

 

参考文章：https://www.jianshu.com/p/b9623407da6f

posted on   sunny123456  阅读(1033)  评论(0)  编辑  收藏  举报
相关博文：
· vue中v-if的常见使用
· Vue基础之表单Form(一)
· 07、Vue.js 3 —— 条件渲染
· vue.js之v-show 与 v-if
· v-show和v-if
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛