Vue学习总结(九)——条件判断v-if、v-else-if、v-else、v-show指令

这篇博客详细介绍了Vue中的条件渲染指令,包括v-if、v-else-if、v-else的用法,通过实例展示了它们如何根据条件在DOM中动态地渲染或移除元素。同时,讨论了v-if与v-show的区别,以及在实际开发中如何选择使用。此外,还提到了v-show在频繁切换显示状态时的优势,并提供了解决Vue中元素复用问题的方法——使用key。

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

1、v-if、v-else-if、v-else指令

  • 这三个指令与JavaScript的条件语句if、else、else if类似。
  • Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

(1)v-if的原理:

  • v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
  • 也就是根本没有不会有对应的标签出现在DOM中。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div v-if="isShowMessage" id="app">
    <h2>{{message}}</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        isShowMessage: true
      }
    })
  </script>
</body>
</html>

 执行结果如下:

   当我们在控制台把 isShowMessage 设置为false的时候,页面显示效果如下:

(2)v-if和v-else联合使用 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2 v-if="isShowMessage" >{{message}}</h2>
    <h1 v-else>当isShowMessage为false的时候显示我</h1>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        isShowMessage: true
      }
    })
  </script>
</body>
</html>

执行结果如下:

 当我们在控制台把 isShowMessage 设置为false的时候,页面显示效果如下:

(3)v-if、v-else-if、v-else的联合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2 v-if="score>=90" >优秀</h2>
    <!--不用写上并且小于90,因为是v-else-if,只有在上面条件不满足的时候才会来判断这个条件-->
    <h1 v-else-if="score>=80">良好</h1>
    <h1 v-else-if="score>=60">及格</h1>
    <h1 v-else>不及格</h1>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        score: 99
      }
    })
  </script>
</body>
</html>

 当我们在控制台把 score的值改变的时候,相应页面显示的值也会发生改变:

2、登录切换的小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号"></input>
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱"></input>
    </span>
    <button @click="isUser = !isUser">切换类型</button>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isUser: true
      }
    })
  </script>
</body>
</html>

执行效果如下: 

 点击切换类型后变成:

3、登录切换的input复用问题。

小问题:

  • 如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前输入的内容。
  • 但是按道理讲,我们应该切换到另外一个input元素中了。
  • 在另一个input元素中,我们并没有输入内容

问题解答:

  • 这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
  • 在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。

解决方案:

  • 如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key
  • 并且我们需要保证key的不同
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <!--当不想被复用的时候,就加一个key,会把key值作为一个标识,当key值一样的时候认为可以复用,不一样时认为不可复用-->
      <input type="text" id="username" placeholder="用户账号" key="username"></input>
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱" key="email"></input>
    </span>
    <button @click="isUser = !isUser">切换类型</button>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isUser: true
      }
    })
  </script>
</body>
</html>

4、v-show指令

(1)用法:v-show的用法和v-if非常相似,也用于决定一个元素是否渲染

(2)v-if和v-show对比:

  • v-if当条件为false的时候,压根不会有对应的元素在DOm中。
  • v-show当条件为false时,仅仅是将元素的dispaly属性设置为none而已。

(3)开发中如何选择呢:

  • 当需要再显示与隐藏之间切片很频繁的时,使用v-show
  • 当只有一次切换时,使用v-if 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--v-if: 当条件为false时,包含v-if指令的元素,根本就不会存在dom中-->
    <h2 v-if="isShow" id="aaa">{{message}}</h2>
    <!--v-show: 当条件为false时,v-show只是给我们的元素添加一个行内样式:display:none-->
    <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            isShow: true
        }
    })
</script>
</body>

当将isShow的值设置成为false后,执行结果如下:

 可以看到v-if为false的指令元素根本没有存在于dom中,v-show指令为false的元素,只是加了一个行内样式display:none。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值