v-show 和 v-if

最新推荐文章于 2025-04-22 07:00:00 发布

原创最新推荐文章于 2025-04-22 07:00:00 发布 · 267 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 同时被 2 个专栏收录

74 篇文章

订阅专栏

面试

13 篇文章

订阅专栏

本文介绍了Vue中v-show和v-if的区别。v-show控制DOM元素显示是通过控制css样式，初始会渲染dom；v-if进行判断，若为false初始不渲染dom。v-if切换开销高，v-show初始渲染开销高，频繁切换用v-show，条件少变用v-if。

v-show和v-if都是用来做条件渲染的

使用方法：

<div v-if="isShow">v-if显示/隐藏</div>
<div v-show="isShow">v-show显示/隐藏</div>

区别

v-show：控制DOM元素显示，其实控制的是css样式，也就是display:noe
v-if进行判断，在浏览器中预览，你会发现整个DOM元素都不见了
v-show 初始会渲染dom，v-if如果是false的状态下，初始不会渲染dom
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

完整代码

<template>
<!-- v-show 和 v-if -->
    <div class="base07">
        <home-back></home-back>
        <div v-if="isShow">v-if显示/隐藏</div>
        <div v-show="isShow">v-show显示/隐藏</div>
        <button @click="isShow = !isShow">点击切换</button>
    </div>
</template>

<script>
import Back from "@/components/common/back.vue"
export default {
    data(){
        return{
            isShow:true
        }
    },
    components:{
        'home-back':Back
    },
    methods:{
    }
}
</script>

<style scoped lang="stylus">
    .base07
        margin-top 30px
        margin-left 50px
        h2
            margin-top 20px
</style>