Vue条件渲染指令详解：v-if、v-else-if、v-show的使用与区别

一、Vue的条件渲染

1.1.v-if

⭐⭐

v-if指令用于根据表达式的布尔值进行条件渲染。其逻辑与基础编程中的if语句一致，在Vue中实现了声明式的条件绑定。

当v-if绑定的表达式结果为true时，对应的元素或组件才会被渲染到DOM中；若为false，则不会渲染。

<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具有惰性（lazy）特性。
• 如果初始条件为false，则不会执行任何操作，直到条件首次变为true时才开始渲染对应的条件块。
• 当条件为false时，条件块内的元素会被完全销毁或从未被渲染；当条件为true时，才会真正渲染条件块中的内容。

1.2.v-if-else

⭐⭐

v-if-else指令用于处理互斥的条件分支。

其逻辑类似于基础语法中的if...else结构。

当v-if绑定的条件不满足时，会执行v-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指令必须紧跟在v-if或v-else-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元素在HTML中作为不可见的包裹层，自身不会被渲染为实际的DOM节点。

当我们不希望特定的容器元素（如div）出现在最终DOM结构中，仅希望包裹其子元素时，可以使用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="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/app_download_QR.cbe9f32.png"
          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使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！