Vue中v-if、v-if-else、v-else-if和v-show如何灵活运用？

本文共计1267个文字，预计阅读时间需要6分钟。

目录

一、Vue的条件渲染

1.1 v-if 1.2 v-if-else 1.3 v-else-if 1.4 template元素 1.5 v-show 1.6 v-show与v-if的区别 总结

一、Vue的条件渲染 1.1 v-if：当条件为真时，渲染元素；否则不渲染。 1.2 v-if-else：结合v-if使用，当v-if条件为假时，渲染else中的元素。 1.3 v-else-if：与v-if-else结合，在v-if和v-else-if条件都不满足时，渲染else-if中的元素。 1.4 template元素：用于包裹v-if、v-else-if、v-else等元素，但不渲染自身。 1.5 v-show：控制元素的显示和隐藏，不改变DOM结构。 1.6 v-show与v-if的区别：v-show只是切换元素的CSS display属性，而v-if是条件性地在DOM中渲染或销毁元素。 总结：Vue的条件渲染提供了灵活的方式来根据数据动态显示或隐藏元素。

目录

• 一、Vue的条件渲染
• 1.1.v-if
• 1.2.v-if-else
• 1.3.v-else-if
•  1.4.template元素
•  1.5.v-show
• 1.6.v-show和v-if的区别
• 总结

一、Vue的条件渲染

1.1.v-if

⭐⭐

if 顾名思义，就是如果满足一个条件后，执行下面的步骤，和我们学的基础语法是一样的，只是这里在Vue中稍微换了一下而已

v-if=“条件” if后面的内容只有在条件为true时，才会被渲染出来

<div class="info" v-if="Object.keys(info).length"> <h2>个人信息</h2> <ul> <li>姓名：{{info.name}}</li> <li>年龄:{{info.age}}</li> </ul> </div>

 v-if的渲染原理：

• v-if是惰性的；
• 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；
• 当条件为true时，才会真正渲染条件块中的内容；

1.2.v-if-else

⭐⭐

v-if-else

我们可以想到 基础语法的 if else

没错也是一样的道理 

v-if=“条件” 如果条件不满足，执行else

<div class="info" v-if="Object.keys(info).length"> <h2>个人信息</h2> </div> <div v-else> <h2>没有输入个人信息</h2> </div>

1.3.v-else-if

⭐⭐

v-else-if 和if搭配使用

且v-else-if可以使用多次（一般用于多种情况下）

v-else-if 只能和if在一起使用

<h1 v-if="score > 90">优秀</h1> <h2 v-else-if="score > 80">良好</h2> <h2 v-else-if="score >= 60">及格</h2> <h2 v-else>不及格啦</h2>

 1.4.template元素

⭐⭐

template：模板的意思

当我们不想让div这种元素被渲染的时候，可以使用template

因为template是作为占位符，用于包裹元素，自身并没有被渲染出来
 
注意点：每个组件根template （最外层的template）只能有一个子元素，非根template没有限制。

 template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：

<template v-if="Object.keys(info).length"> <h2>个人信息</h2> <ul> <li>姓名：{{info.name}}</li> <li>年龄:{{info.age}}</li> </ul> </template> <template v-else> <h2>没有输入个人信息</h2> </template>

 1.5.v-show

⭐⭐

v-show的用法和v-if一样

<div v-show="isShowCode"> <img src="img.558idc.com/uploadfile/allimg/js/app_download_QR.cbe.jpg" alt="" /> </div>

1.6.v-show和v-if的区别

⭐⭐

v-if和v-show区别

用法上：

v-show是不支持template；v-show不可以和v-else一起使用

本质的区别：

v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；

如何选择

如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；如果不会频繁的发生切换，那么使用v-if；

v-if

• 是真正的条件渲染，因为它会确保在切换过程中事件内的**事件监听器和子组件适当得被销毁和重建。
• 是有惰性的：如果在初始渲染的时候事件为假，则什么也不做，直到条件第一次变为真的时候，才会开始渲染条件块

v-show

相比v-show就简单的多，不管初始条件是什么，元素始终都会被渲染，而且只是简单地基于css进行切换。

两者的使用

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则用v-show更好一些；如果运行的条件很少改变，则用v-if更好。

总结

到此这篇关于Vue中v-if、v-if-else、v-else-if与v-show基本使用的文章就介绍到这了,更多相关Vue v-if、v-if-else、v-else-if、v-show使用内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！