v-if 和v-show的区别

爱凑热闹828

已于 2022-12-15 21:37:18 修改

阅读量153

点赞数 1

分类专栏： Vue 文章标签： javascript html 前端

于 2022-12-05 22:38:59 首次发布

本文链接：https://blog.csdn.net/weixin_65692463/article/details/128127870

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

v-if vs v-show

v-if本质其实是动态的创建或者删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 导包 -->
    <script src="./vue.js"></script>
</head>

<body>

    <!-- HTML结构 -->
    <div id="app">
        <p v-if="flag">我是v-if渲染出来的</p>
        <p v-show="flag">我是v-show渲染出来的</p>
        <button @click="flag=!flag">修改flag值</button>
    </div>
    <script>
        /* 创建vue实例 */
        let app = new Vue({
            //el:挂载点
            el: '#app',
            //data: 要渲染的数据
            data: {
                flag: true
            }
        })
    </script>
</body>

</html>

值都是true的状态，没有区别

值都是false的状态，v-for是直接从dom树上删除，v-show是修改css样式：display: none

以下是官网的解释

条件渲染 — Vue.js

爱凑热闹828

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if 和v-show的区别

一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。值都是false的状态，v-for是直接从dom树上删除，v-show是修改css样式：display: none。
复制链接

扫一扫