3.Vue的常用指令之v-if与v-show

最新推荐文章于 2025-05-26 15:48:28 发布

彼岸的饭碗

最新推荐文章于 2025-05-26 15:48:28 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42392049/article/details/116757924

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue中的条件渲染指令v-if、v-else-if、v-else与v-show的区别及用法，包括它们的基本语法、实际应用案例以及性能考量。

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

1.指令

directive

vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载

2.v-if

v-if的作用是通过一个布尔表达式对dom的上树与下树的渲染

基本使用：

<p v-if="false">我是第一行dom元素</p>
<p v-if="true">我是第二行dom元素</p>

但是通常工作中不是使用布尔值直接进行渲染的，而是通过data带有布尔值的表达式进行判断。

<body>
    <div id="app">
        <p v-if="a">我是第一行dom元素</p>
        <p v-if="!a">我是第二行dom元素</p>
        <h1>
            {{a}}
        </h1>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:false
            },
            methods:{
            }
        })
    </script>
</body>

结果：
在这里插入图片描述
第二种情况是通过使用表达式进行逻辑判断

<body>
    <div id="app">
       <!--当a的值为100的时候显示-->
        <p v-if="a==100">我是第一行dom元素</p>
        <p v-if="!a">我是第二行dom元素</p>
        <h1>
            {{a}}
        </h1>
        <button @click="add">按我加1</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:95
            },
            methods:{
                add(){
                    this.a++;
                }
            }
        })
    </script>
</body>

v-if的根本原理是一个通过对值得隐式转换，一个是通过对表达式的判断得出的布尔值得来的。

接下来将案例进行深入演变

<body>
    <div id="app">
        <h1>
            {{a}}
        </h1>
        <p v-if="a>=0 && a<=5">我是5</p>
        <p v-if="a>=6 && a<=10">我是10</p>
        <p v-if="a>=11 && a<=15">我是15</p>
        <p v-if="a>=16 && a<=20">我是20</p>
        <p v-if="a>=21">我是25</p>
        <button @click="add">按我加1</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                a:0
            },
            methods:{
                add(){
                    this.a++;
                }
            }
        })
    </script>
</body>

同样，实际上可以通过v-else-if与v-else进行分支判断

<p v-if="a>=0 && a<=5">我是5</p>
<p v-else-if="a>=6 && a<=10">我是10</p>
<p v-else-if="a>=11 && a<=15">我是15</p>
<p v-else-if="a>=16 && a<=20">我是20</p>
<p v-else="a>=21">我是25</p>

需要注意的是v-else的使用前提是必须先有v-if，并且中间不允许有任何的元素间隔

<p v-if="a>=0 && a<=5">我是5</p>
<div></div>
<p v-else="a>=21">我是25</p>

这种是不可以的

执行结果如下
在这里插入图片描述

3.v-show

v-show与v-if的显示情况类似，但是原理不一样，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断,并没有实现元素的下树

<body>
    <div id="app">
        {{boo}}
        <p style="display: none;" v-show="boo>=5" > 我是5</p>
        <button @click="add">点我加1</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
                boo:0
            },
            methods:{
                add(){
                    this.boo++;
                }
            }
        })
    </script>
</body>