vue中v-if与v-show的区别

最新推荐文章于 2024-04-12 07:27:07 发布

原创最新推荐文章于 2024-04-12 07:27:07 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

64 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

本文详细对比了Vue.js中v-if与v-show指令的使用场景与区别。v-if在条件为假时不会渲染DOM，适用于条件较少改变的情况；而v-show通过改变display属性实现元素显示与隐藏，适合频繁切换的场景。

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

情景：有时候你可能会需要一个效果按条件时有时无
vue提供v-if与v-else来实现这样的效果，以下是使用其的一部分代码

<template>
    <div @click="showT">
        <transition name="el-zoom-in-center">
            <div class="transition" v-if="show"></div>
           ／／或者<div class="transition" v-show="show"></div>
        </transition>
        <transition name="el-zoom-in-top">
            <div class="transition" v-if="show"></div>
        </transition>
        <transition name="el=zoom-in-bottom">
            <div class="transition" v-if="show"></div>
        </transition>
    </div>
</template>
<script>
    export default {
        data: () => ({
            show: true,
        }),
        methods: {
            showT() {
                this.show = !this.show
            }
        }
    }
</script>
<style>
    div {
      display: flex;  
    }
    .transition {
        width: 200px;
        height: 200px;
        background-color: #409EFF;
        margin-right: 20px;
    }
</style>

效果图v-if

点击后会发现，上图中的蓝框消失，dom结构中的div也消失了

v-show的效果图

点击之后的效果图，看到这里就会看到区别了

区别
v-show的元素会始终被渲染并保留在dom中，原理是每次改变其display的属性

v-show不支持template元素

v-if是惰性的，即如果初始条件是假，则什么也不做

v-if会在切换过程中使组件被销毁和重建，所以v-if有更高的切换开销，但是v-show因为无论如何都会被渲染，所以初始渲染开销会更高，所以如果非常频繁的切换用v-show比较好，但是运行时条件很少被改变则使用v-if较好