六、Vue条件判断

最新推荐文章于 2023-09-04 09:53:16 发布

不会Java怎么找女朋友

最新推荐文章于 2023-09-04 09:53:16 发布

阅读量664

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/lin_willen/article/details/112159318

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

01-v-if,v-else-if,v-else的使用

1.1 v-if,v-else-if,v-else

1、v-if,v-else-if,v-else

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

2、v-if原理

v-if后面的条件为false时，对应的元素以及其子元素不会渲染
也就是根本没有不会有对应的标签出现在DOM中

1.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-if,v-else-if,v-else的使用</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>
  <hr>
  <h2>{{result}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      score: 97
    },
    computed: {
      result(){
        let result = '';
        if(this.score >= 90){
          result = '优秀';
        }else if(this.score >= 80){
          result = '良好';
        }else if(this.score >= 60){
          result = '及格';
        }else{
          result = '不及格';
        }
        return result;
      }
    }
  })
</script>
</body>
</html>

1.3 运行结果

在这里插入图片描述

02-切换登录方式的案例

2.1 案例需求

用户在登录时，可以切换用户账号登录还是邮箱账号登录

2.2 实战代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-切换登录方式的案例</title>
</head>
<body>

<div id="app">
   <span v-if="isUser">
     <!--for="username" 这个属性可以让鼠标点击文字的时候光标在id="username"的输入框里-->
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱">
  </span>
  <button @click="isUserClick()">切换登录方式</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isUser:true
    },
    methods: {
      isUserClick(){
        this.isUser = !this.isUser;
      }
    }
  })
</script>
</body>
</html>

2.3 案例小问题

1、小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字一仍然显示之前的输入的内容
但是按道理讲，我们应该切换到另一个input的元素中
在另一个input元素中，我们并没有输入内容
为什么会出现这个问题呢？

2、问题解答：

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

3、解决方案：

如果我们不考虑Vue出现类似重复利用的问题，可以给对应的input添加key
并且保证key不相同

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUserClick()">切换登录方式</button>
</div>

03-v-show的使用

3.1 v-show

1、v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
2、v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

v-if当条件为false时，压根不会有对应的元素在DOM中
v-show当条件为false，仅仅是将元素的display属性设置为none而已

3、开发种如何选择呢？

当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if

3.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-show的使用</title>
</head>
<body>

<div id="app">
  <!--  v-if :当条件为false时，包含v-if指令的元素。根本就不会存在dom中-->
  <h2 v-if="isShow">{{message}}</h2>
  <!--  v-show: 当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none-->
  <h2 v-show="isShow">{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isShow:true,
    }
  })
</script>
</body>
</html>