Vue.js学习笔记——5.v-if、v-else、v-else-if和v-show的使用

最新推荐文章于 2024-05-14 21:04:35 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-05-14 21:04:35 发布

阅读量860

点赞数 1

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/DDDDDecade/article/details/109902167

版权

Vue.js学习笔记专栏收录该内容

17 篇文章 2 订阅

订阅专栏

v-if、v-else、v-else-if和v-show的使用

一、v-if、v-else、v-else-if的使用
二、条件渲染时的复用问题
三、v-show的使用以及与v-if的区别

一、v-if、v-else、v-else-if的使用

v-if、v-else-if、v-else这三个指令和JavaScript的条件语句if、else、else if类似，Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
作用：条件渲染
语法：

<element v-if="boolean"></element>
<element v-else-if="boolean"></element>
<element v-else="boolean"></element>

举例：分数判断

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-if="score>=90">{{score}} 优秀</h2>
  <h2 v-else-if="score>=80">{{score}} 良好</h2>
  <h2 v-else-if="score>=60">{{score}} 及格</h2>
  <h2 v-else="score>=0">{{score}} 不及格</h2>
  <button @click="addScore">+</button>
  <button @click="subScore">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      score:90
    },
    methods:{
      addScore:function () {
        this.score +=10
      },
      subScore:function () {
        this.score -=10
      }
    }
  })
</script>
</body>
</html>

执行结果：
v-if、v-else、v-else-if和v-show的使用
通过按钮改变score的值，v-if则会根据表达式的布尔值有条件的渲染或销毁DOM元素
修改score的值

二、条件渲染时的复用问题

举例：切换登录类型

<!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="用户账号">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="email" id="email" placeholder="用户邮箱">
  </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>

执行结果：
切换登录类型
点击按钮就会改变v-if的值，使之改为渲染v-else的元素
在这里插入图片描述
可是这里有个小问题，原来在username文本框中输入的字符串在条件渲染的过程中保留到了email文本框中，按道理说我们应该切换到了另一个input元素中了。这是由于Vue的虚拟DOM的原因，Vue在将元素渲染到浏览器之前，会将元素先渲染到虚拟DOM内存中，再将虚拟DOM中的元素渲染到浏览器中，出于性能考虑，会尽可能的复用虚拟DOM中已经存在的元素。
如果不希望Vue出现类似复用的问题，可以给对应的input添加上key元素，并且保证key的唯一性。

<!--在input中添加key属性，并保证每个key不相同-->
<input type="text" id="username" placeholder="用户账号" key="username">

<input type="email" id="email" placeholder="用户邮箱" key="email">

三、v-show的使用以及与v-if的区别

v-show的用法和v-if非常相似，也是用于决定一个元素是否渲染
作用：条件渲染
语法：

<element v-show="boolean"></element>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h2 v-show="isShow">{{message}}</h2>
  <button @click="isShow = !isShow">隐藏/显示</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      isShow:true
    }
  })
</script>
</body>
</html>

执行结果：
v-show的使用

点击按钮改变v-show和v-if的判断条件，可以看见两个元素都不见了
v-show和v-if的区别
但是在控制台中可以看到id为"if"的h2元素直接从DOM中移除了，而id为"show"的h2元素增加了display:none的样式，这就是两者之间的区别。
当需要在显示与隐藏之间频繁切换时，建议使用v-show添加样式来隐藏；
当只有一次切换时，建议通过使用v-if操作DOM来隐藏。

土拨鼠的忧伤丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js学习笔记——5.v-if、v-else、v-else-if和v-show的使用

v-if、v-else、v-else-if和v-show的使用v-if、v-else、v-else-if的使用v-if、v-else、v-else-if的使用
复制链接

扫一扫