Vue中的v-show和v-if

最新推荐文章于 2024-07-19 10:16:01 发布

Z_JJ

最新推荐文章于 2024-07-19 10:16:01 发布

阅读量823

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45966406/article/details/127018421

版权

本文详细对比了Vue中的v-if和v-show指令。v-show通过切换CSS的display属性控制元素显示，适合频繁切换；v-if则直接操作DOM，适用于不频繁切换，性能消耗较大。两者在页面初始化和后续更新时的处理方式不同，选择使用需考虑场景和性能需求。

摘要由CSDN通过智能技术生成

在Vue中，v-show和v-if是我们常用的用来控制元素或组件是否渲染，在面试中，这也是面试官常常提问的问题，那么，这两个指令有什么区别呢？？？

1、v-show

v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的
语法表达v-show = " 表达式 "
指令后面的值会以布尔值的形式出现
本质是通过设置 display：none 来实现隐藏和显示
元素会随着数据的改变而进行同步更新

基本用法如下

<body>
    <div id="root">
        <button id="btn" @click="changeMsg">点我切换显示</button>
        <p v-show="isShow">猜猜我在哪</p>
    </div>
    <script>
        new Vue({
            el:'#root',
            data() {
                return {
                    isShow : false
                }
            },
            methods: {
                changeMsg(){
                    this.isShow = !this.isShow
                }
            },
        })
    </script>
</body>

2、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
v-if = "表达式"
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

基本用法如下：

<body>
    <div id="root">
        <button id="btn" @click="changeMsg">点我切换显示</button>
        <p v-if="isShow">猜猜我在哪</p>
    </div>
    <script>
        new Vue({
            el:'#root',
            data() {
                return {
                    isShow : false
                }
            },
            methods: {
                changeMsg(){
                    this.isShow = !this.isShow
                }
            },
        })
    </script>
</body>

3、两者的区别

1. 原理不同

v-show指令：无论值为true或false，元素始终被渲染到HTML，它只是简单的设置css的style属性，当值为false时，元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
v-if指令：值为true时会渲染到html中，值为false时是不会渲染到html中的，是通过操纵dom元素来进行切换显示