当前位置：首页 > news >正文

【Vue】Vue的v-if、v-if-else、v-else-if、v-show的使用

news 来源：原创 2024/5/19 8:28:26

CSDN话题挑战赛第2期
参赛话题：面试宝典

💭💭

✨： Vue的v-if、v-if-else、v-else-if、v-show的使用

💟：东非不开森的主页

💜：如果有幸和你一起学习一起进步，那就太棒啦💜💜

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="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/app_download_QR.cbe9f32.png"
          alt=""
        />
</div>