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

Posted 2021-03-04 antao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于Vue显示隐藏（v-show，v-if）的主要内容，如果未能解决你的问题，请参考以下文章

Vue-使用下标作为依据控制显示隐藏时，v-if会使视图错乱，需换成v-show

4.vue的v-if和v-show条件渲染