v-if（v-else-if、v-else）、v-show使用区别

weixin_45703831

已于 2024-04-09 17:37:10 修改

阅读量230

点赞数 3

文章标签： vue.js

于 2024-04-09 17:07:08 首次发布

本文链接：https://blog.csdn.net/weixin_45703831/article/details/137559524

版权

1、条件成立的情况下

2、条件不成立的时候

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<body>
    <!--
        v-if以及v-show都是用于控制显示与隐藏内容
        · v-if：操作的是DOM节点，【用于内容不经常显示与隐藏，为什么？
                                作用是需要的显示时候就添加节点，不需要显示的时候删除节点，消耗性能更大】
        · v-show：操作的是样式，【用于内容经常显示与隐藏，为什么？
                                作用是需要的显示时候通过样式display:block显示出来，不需要显示的时候display:none隐藏起来】
    -->
    <!-- if...esle if...else 语法执行过程是一样 -->
    <div id='app'>
        <!-- 当v-if判断条件成立，则节点/内容会被显示出来，【条件不成立的时候，节点/内容会被删除掉】-->
        <!-- 需要注意的是：v-esle不能单独使用，需要配合v-if来使用 -->
        
        <!-- 条件成立则显示,不然跑到下一层：v-else-if中判断条件 -->
        <div v-if="num>50">这是v-if显示内容</div>

        <!-- 如果这一层条件满足则显示，否则显示：v-else中内容 -->
        <div v-else-if="num==100">这是v-else-if 显示的内容</div>
 
        <div v-else>这是v-else显示的内容</div>

        <!-- v-show：条件不成立的情况下，其作用相当于“display:none” -->
        <div v-show="num>50">这是v-show显示的内容</div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10
        }
    })
</script>

</html>