Vue基础学习笔记 --- v-if 和 v-show

最新推荐文章于 2023-11-21 09:50:30 发布

努力学习的米

最新推荐文章于 2023-11-21 09:50:30 发布

阅读量506

点赞数 1

分类专栏： vue 文章标签：前端 vue.js 学习

本文链接：https://blog.youkuaiyun.com/MImi_0612/article/details/125685552

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue.js中的条件渲染特性，重点对比了v-if和v-show的使用区别。v-if在初始条件为假时不渲染，而v-show则始终渲染并切换display属性。当需要频繁切换时推荐使用v-show，若条件变化不频繁则选择v-if。文中通过实例展示了它们在勾选显示小块元素场景下的应用。

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

条件渲染

v-if：是否渲染当前元素，

v-else

v-else-if

v-show：和v-if类似，但是元素始终会被保存到DOM中，只是简单的切换元素的css属性display来控制显示和隐藏

v-if和v-show的区别：

什么时候被渲染：v-if是在初始条件为假的时候，什么都不做，每次条件为真的时候，都会重新渲染；v-show是不管初始条件是什么，元素都会被渲染
v-show：只是简单的操作css的display属性；v-if是删除DOM 元素
使用的场景选择：如果是频繁的切换，用v-show；如果是运行之后条件很少改变的，用v-if

典型案例：勾选显示小块

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="flag">勾选显示小块
        <div class="box" v-if="flag"></div>
        <p v-else="flag">小块消失了</p>
        <h3>v-show显示小块</h3>
        <div class="box" v-show="flag"></div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                flag: false
            }
        })
    </script>
</body>

</html>