六、Vue条件判断

最新推荐文章于 2023-01-10 08:45:30 发布

不会Java怎么找女朋友

最新推荐文章于 2023-01-10 08:45:30 发布

阅读量600

点赞数 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>

3.3 运行结果

在这里插入图片描述

不会Java怎么找女朋友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六、Vue条件判断

01-v-if,v-else-if,v-else的使用1.1 v-if,v-else-if,v-else1、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><ht
复制链接

扫一扫

专栏目录