v-if 和v-show的区别

Bob drudgery

于 2019-06-26 20:46:01 发布

阅读量91

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Bobdragery/article/details/93777467

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue中的条件指令中，v-if 和v-show 都会使属性消失，但是

v-show是通过display：none渲染消失，而v-if压根儿就不会渲染，所以在使用时建议用key属性建立缓存

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .div{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app01">
<!--    条件指令v-show| v-if-->
<!-- v-show:消失是以display:none渲染   -->
    <div class="div" v-show="s1"></div>
    <div class="div" v-show="s2"></div>
<!-- v-if:消失时不会被渲染，所以建议建立缓存，用key属性   -->
    <div class="div" v-if="s1" key="div1"></div>
    <div class="div" v-if="s2" key="div1"></div>
</div>


</body>
<script>
    new Vue({
        el:'#app01',
        data:{
            s1:false,
            // s2:false 不写默认为false
        }
    })
</script>
</html>

在这里插入图片描述