Vue显示隐藏（v-show，v-if）

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 @   杵臼  阅读(6029)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手