v-if 和 v-show 的应用(切换)场景，及其区别

最新推荐文章于 2024-04-14 10:00:00 发布

L＆wy

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量796

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44719554/article/details/108832088

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-if 指令是“真正”的条件渲染，因为它会确保在切换过程中条
件块内的事件监听器和子组件适当地被销毁和重建。
相比之下，v-show指令就简单得多，不管初始条件是什么，元
素总是会被渲染，并且只是简单地基于CSS进行切换。
3.一般来说，v-if指令有更高的切换开销，而v-show指令有更高
的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show
指令较好;如果在运行时条件很少改变，则使用v-if指令较好。

以下为各自的小例子，共各位博友参考*
v-if

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>用户登录/注册</h1>
        <input type="checkbox" v-model="isRegUser" />
        <div v-if="isRegUser">
            <h3>注册</h3>
        </div>
        <div v-else>
            <h3>登录</h3>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isRegUser: true
            }

        })
    </script>
</body>

</html>

v-show

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>上班时间</h1>
        <input type="checkbox" v-model="inTheSummer" />夏天时间

        <div v-show="inTheSummer">
            <h3>夏天时间</h3>

        </div>
        <div v-show="!inTheSummer">
            <h3>冬天时间</h3>

        </div>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                inTheSummer: true
            }
        })

    </script>
</body>

</html>

L＆wy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if 和 v-show 的应用(切换)场景，及其区别

v-if 指令是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。相比之下，v-show指令就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。3.一般来说，v-if指令有更高的切换开销，而v-show指令有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show指令较好;如果在运行时条件很少改变，则使用v-if指令较好。以下为各自的小例子，共各位博友参考*v-if<!DOCTYPE html.
复制链接

扫一扫

专栏目录