v-if条件判断

最新推荐文章于 2024-04-14 10:00:00 发布

Chueng_to

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量6.6k

点赞数 2

分类专栏： Vue学习

本文链接：https://blog.csdn.net/KEY_cheung/article/details/108364581

版权

Vue学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. v-if、v-else-if和v-else

1.1 和if、else、else if效果一样

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id = "app">
  <!--在标签里使用条件判断-->
  <h2 v-if="score >= 90">优秀</h2>
  <h2 v-else-if="score >= 80">良好</h2>
  <h2 v-else-if="score >= 60">及格</h2>
  <h2 v-else>不及格</h2>
 
  <!--当判断条件较多时，最好在computed中进行判断-->
  <h1>{{result}}</h1>
 
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      score:99
    },
    computed:{
      result(){
        let showMessage = '';
        if (this.score >= 90){
          showMessage = '优秀';
        } else if(this.score >= 80){
          showMessage = '良好';
        } else if (this.score >= 60) {
          showMessage = '及格';
        } else {
          showMessage = '不及格';
        }
        return showMessage
      }
    }
  })
</script>
</body>
</html>

1.2 用户登录方式切换小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户切换登录案例</title>
</head>
<body>
<div id = "app">
  <span v-if="isUser">
    <laber for="username">用户账号</laber>
    <input type="text" id="username" placeholder="用户账号">
  </span>
  <span v-else>
    <laber for="email">用户邮箱</laber>
    <input type="text" 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>

效果展示：

1.3 上述案例存在的问题

问题：用户账号和用户邮箱有两个不同的input输入框元素。按理来说，当我们在用户账号输入内容后再切换登录类型时，应该切换到了另一个input元素中，刚才输入的内容不存在在新的input中，可实际上无论我如何切换登录类型，输入的内容都不会有所改变。

原因：这是因为Vue在进行DOM渲染时，出于对性能的考虑，会尽可能的复用已经存在的元素，而不是创建新的元素。也就是说，当我们改变登录类型时，提交给页面的同样还是一个label和input元素，为了提高性能，对页面进行渲染的还是一开始提交的label和input元素，但不同的属性还是会改变

解决方法：对相应的input添加标识符key，并且保证key的不同；或者监听点击事件并清空

2.v-show和v-if

相同之处：用法相似，都是用于决定一个元素是否渲染

不同之处：在两者都为false时，show改变行内样式，if把DOM内元素删除。

如何选择使用：在显示和隐藏之间切片使用很频繁时，使用v-show；只有一次切换时，使用v-if

查看控制台的代码样式，当两者都为false，使用了v-if时，该行代码会被注释掉；而使用v-show的代码行则会改变行内样式

Chueng_to

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
v-if条件判断

1. v-if、v-else-if和v-else1.1 和if、else、else if效果一样<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id = "app">  &...
复制链接

扫一扫