Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)

野性酷女 2023-09-25 20:05 78阅读 0赞

## 条件渲染 ##

顾名思义，就是符合哪些条件，就渲染哪些东西，其实就是几个指令的使用  
先做一个小例子

![在这里插入图片描述][787b2cb0533346aba3e20237e6c71e6a.png]

我想让这个div时而显示，时而隐藏，可以在两者之间进行切换，那么使用原生的方式实现，想到的是用display控制。在vue中不用亲自的写这个属性，它提供了一个执行:v-show

## v-show ##

v-show是vue给我们提供的指令，控制元素是否展示，值通常为布尔值(也可以写表达式)，为false的时候隐藏，为true的时候显示，默认为true

![在这里插入图片描述][0b2607d9d76843bfb221a07f273ba1b9.png]

![在这里插入图片描述][619fcea33caf4af3bc4ee1d44ffde65d.png]

![在这里插入图片描述][7bd041cc89c14598aba29616759cb09b.png]

![在这里插入图片描述][368f49e870ab49a590bffd0ba5fb6714.png]

v-show不仅仅可以写布尔值，也可以写表达式，根据表达式的结果判断是true还是false

![在这里插入图片描述][ac2efcc9bfe94666b33ded03613dfd7f.png]

![在这里插入图片描述][7212632cebec4e51ba6efcab2680f5a5.png]

上面两个都是false，所以也一定不会显示

![在这里插入图片描述][d278e4820e1c408fac3b8a0d56607704.png]

v-show的底层实现其实是调整的是display的属性

![在这里插入图片描述][7bf311ba17934f649f7d8b6d56b4df82.png]

说到v-show就不得不说下v-if了

## v-if ##

我们把v-show换成v-if，发现元素也没了，而且没得很彻底，不止是被隐藏了，根本就找不到了  
如果确定了这个元素不想显示，那么可以使用v-if

![在这里插入图片描述][de6332b6e51d4538863bbbd2e4788e0a.png]

元素直接没了

![在这里插入图片描述][dc82dadb6c96495aad7deef568d23a8b.png]

当然v-if也可以支持表达式

![在这里插入图片描述][3bad77e7c5a544d0b6c173f58ee3ed6f.png]

## v-show和v-if整合小案例 ##

如果v-show和v-if都已经掌握了，就可以做一个交互的小案例了  
这个案例内容为：定义一个初始化为0的属性n，通过按钮每次自增1，n=1的时候展示一个div，n=2的时候再展示一个div

### v-show实现 ###

首先使用v-show实现

![在这里插入图片描述][75229f13225449449ae5dddfa4c7d82a.png]

效果是完全符合的

![在这里插入图片描述][a5de49b963644e96ba2411169267bdf2.png]

### v-if实现 ###

然后使用v-if实现

![在这里插入图片描述][9b5aa6a7aeb540df9077f143151ed6b5.png]

也是可以实现的

![在这里插入图片描述][6e2d35a07a6b4a969d5a84e0d87264da.png]

### v-show和v-if对比 ###

那么既然v-show和v-if都可以是实现，那么用哪个呢？

如果元素有着很高的切换频率，那么建议使用v-show,因为v-show只是控制display的属性，元素节点还在，但是如果v-if切换频率很高，元素节点一直在消失，不断在dom里面添加删除一个节点，存在一定的效率问题，所以切换频率低的建议使用v-if,频率高的建议使用v-show

## v-else-if ##

不仅有v-if，还有v-else-if,写法和js的写法逻辑是一样的，如果第一个表达式成立，就不会判断后面的表达式了，它的效率比v-if高，如果有多个判断，建议使用它

![在这里插入图片描述][073fdcd7fc694838bd89b316856e8c80.png]

![在这里插入图片描述][b0644d3265d14e2297020c9479cd30bf.png]

## v-else ##

既然都有v-if和v-else-if,怎么少的了v-else呢，当没有表达式满足的时候，会执行它，一般v-else里面不会写表达式，因为写也不会去执行判断

![在这里插入图片描述][64fffc29ca55485783ad4b3d32295d0c.png]

![在这里插入图片描述][e36b6ccc86f14183997c81a4f736e745.png]

![在这里插入图片描述][0420382ff5b442bfa3c012d51404db51.png]

值得注意的是：当我们配合使用这些判断的时候，不允许被打断，如果中间有其他元素，则会打断整体结构的运行

![在这里插入图片描述][949b1559d9214dafa17261a8fe194d0e.png]

## 小技巧 ##

如果我们使用v-show或者v-if判断的时候，有多个相同的条件，那么我们需要写多次相同的判断

![在这里插入图片描述][4ba7513b399343b4a8d5a3b918400fe8.png]

![在这里插入图片描述][f50aa0a630a346d2a0718b6188897f72.png]

这样虽然可以实现功能，但是代码有些冗余

### 技巧1(不推荐) ###

这种情况下，我们可以给这些元素一个父元素，条件在父容器里面写

![在这里插入图片描述][148a3da77c2c418387cafea9ec16752c.png]

![在这里插入图片描述][d10d7caa12da41e88b0f9caa9aa9902d.png]

这样写虽然可以实现，但是有个小小的美中不足，就是破坏了结构，本来只有三个H2元素，现在为了实现功能却要加一个div

![在这里插入图片描述][3ca3bed54b2a4406a0d2298c75329f2d.png]

### 技巧2(推荐) ###

我们不用div，使用template(模板)，它最大的特点就是不影响结构，值得注意的是：template只能配合v-if使用，不能配合v-show使用

![在这里插入图片描述][c92e37d824f3458d8f45689370f416fa.png]

![在这里插入图片描述][4a5116db75f841fcb69652ccfced342b.png]

上面说了，只能配合v-if使用，换成v-show是不行了，我们也来验证下

![在这里插入图片描述][d69d71e0dadd4a09b0cb9f2a6170ac91.png]

n还不等于1就显示出来了，明显不行

![在这里插入图片描述][b015b15384b8479c8007ece6635de22b.png]

相关代码

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        
        
    
          
         
    
        
        <div id="root">
            
            <h2>当前的n的值是{
       {n}}</h2>
            <button @click="n++">点我n+1</button>
            
    
            
          <template v-if='n===1'>
            <h2>北京</h2>
            <h2>青岛</h2>
            <h2>深圳</h2>
          </template>
          
        </div>
        
    </body>
    
    <script type="text/javascript">
       const vm=  new Vue({
            el:'#root',
            data:{
                name:'vue',
                n:0
               
            }
        
        })
    </script>
    
    </html>

## 总结 ##

条件渲染  
1 v-if  
写法：  
(1) v-if=“表达式”  
(2) v-else-if=“表达式”  
(3) v-else=“表达式”  
适用于：切换频率比较低的场景  
特点：不展示dom元素直接移除  
注意：v-if可以和v-else-if,v-else一起使用，但是要求结构不能打断  
2 v-show  
写法：v-show=“表达式”  
适用于：切换频率较高的场景  
注意：不展示dom元素不会被移，仅仅是控制display的属性进行显示或者隐藏  
3 备注  
使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

[787b2cb0533346aba3e20237e6c71e6a.png]: https://img-blog.csdnimg.cn/787b2cb0533346aba3e20237e6c71e6a.png
[0b2607d9d76843bfb221a07f273ba1b9.png]: https://img-blog.csdnimg.cn/0b2607d9d76843bfb221a07f273ba1b9.png
[619fcea33caf4af3bc4ee1d44ffde65d.png]: https://img-blog.csdnimg.cn/619fcea33caf4af3bc4ee1d44ffde65d.png
[7bd041cc89c14598aba29616759cb09b.png]: https://img-blog.csdnimg.cn/7bd041cc89c14598aba29616759cb09b.png
[368f49e870ab49a590bffd0ba5fb6714.png]: https://img-blog.csdnimg.cn/368f49e870ab49a590bffd0ba5fb6714.png
[ac2efcc9bfe94666b33ded03613dfd7f.png]: https://img-blog.csdnimg.cn/ac2efcc9bfe94666b33ded03613dfd7f.png
[7212632cebec4e51ba6efcab2680f5a5.png]: https://img-blog.csdnimg.cn/7212632cebec4e51ba6efcab2680f5a5.png
[d278e4820e1c408fac3b8a0d56607704.png]: https://img-blog.csdnimg.cn/d278e4820e1c408fac3b8a0d56607704.png
[7bf311ba17934f649f7d8b6d56b4df82.png]: https://img-blog.csdnimg.cn/7bf311ba17934f649f7d8b6d56b4df82.png
[de6332b6e51d4538863bbbd2e4788e0a.png]: https://img-blog.csdnimg.cn/de6332b6e51d4538863bbbd2e4788e0a.png
[dc82dadb6c96495aad7deef568d23a8b.png]: https://img-blog.csdnimg.cn/dc82dadb6c96495aad7deef568d23a8b.png
[3bad77e7c5a544d0b6c173f58ee3ed6f.png]: https://img-blog.csdnimg.cn/3bad77e7c5a544d0b6c173f58ee3ed6f.png
[75229f13225449449ae5dddfa4c7d82a.png]: https://img-blog.csdnimg.cn/75229f13225449449ae5dddfa4c7d82a.png
[a5de49b963644e96ba2411169267bdf2.png]: https://img-blog.csdnimg.cn/a5de49b963644e96ba2411169267bdf2.png
[9b5aa6a7aeb540df9077f143151ed6b5.png]: https://img-blog.csdnimg.cn/9b5aa6a7aeb540df9077f143151ed6b5.png
[6e2d35a07a6b4a969d5a84e0d87264da.png]: https://img-blog.csdnimg.cn/6e2d35a07a6b4a969d5a84e0d87264da.png
[073fdcd7fc694838bd89b316856e8c80.png]: https://img-blog.csdnimg.cn/073fdcd7fc694838bd89b316856e8c80.png
[b0644d3265d14e2297020c9479cd30bf.png]: https://img-blog.csdnimg.cn/b0644d3265d14e2297020c9479cd30bf.png
[64fffc29ca55485783ad4b3d32295d0c.png]: https://img-blog.csdnimg.cn/64fffc29ca55485783ad4b3d32295d0c.png
[e36b6ccc86f14183997c81a4f736e745.png]: https://img-blog.csdnimg.cn/e36b6ccc86f14183997c81a4f736e745.png
[0420382ff5b442bfa3c012d51404db51.png]: https://img-blog.csdnimg.cn/0420382ff5b442bfa3c012d51404db51.png
[949b1559d9214dafa17261a8fe194d0e.png]: https://img-blog.csdnimg.cn/949b1559d9214dafa17261a8fe194d0e.png
[4ba7513b399343b4a8d5a3b918400fe8.png]: https://img-blog.csdnimg.cn/4ba7513b399343b4a8d5a3b918400fe8.png
[f50aa0a630a346d2a0718b6188897f72.png]: https://img-blog.csdnimg.cn/f50aa0a630a346d2a0718b6188897f72.png
[148a3da77c2c418387cafea9ec16752c.png]: https://img-blog.csdnimg.cn/148a3da77c2c418387cafea9ec16752c.png
[d10d7caa12da41e88b0f9caa9aa9902d.png]: https://img-blog.csdnimg.cn/d10d7caa12da41e88b0f9caa9aa9902d.png
[3ca3bed54b2a4406a0d2298c75329f2d.png]: https://img-blog.csdnimg.cn/3ca3bed54b2a4406a0d2298c75329f2d.png
[c92e37d824f3458d8f45689370f416fa.png]: https://img-blog.csdnimg.cn/c92e37d824f3458d8f45689370f416fa.png
[4a5116db75f841fcb69652ccfced342b.png]: https://img-blog.csdnimg.cn/4a5116db75f841fcb69652ccfced342b.png
[d69d71e0dadd4a09b0cb9f2a6170ac91.png]: https://img-blog.csdnimg.cn/d69d71e0dadd4a09b0cb9f2a6170ac91.png
[b015b15384b8479c8007ece6635de22b.png]: https://img-blog.csdnimg.cn/b015b15384b8479c8007ece6635de22b.png