六、Vue条件判断

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 代码实战


<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>


<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 运行结果

六、Vue条件判断_第1张图片

02-切换登录方式的案例

2.1 案例需求

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

2.2 实战代码


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-切换登录方式的案例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="text" id="email" placeholder="用户邮箱">
  span>
  <button @click="isUserClick()">切换登录方式button>
div>

<script type="text/javascript" src="../js/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 代码实战


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

<div id="app">
  
  <h2 v-if="isShow">{
    {message}}h2>
  
  <h2 v-show="isShow">{
    {message}}h2>
div>

<script type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  const vm = new Vue({
      
    el: '#app',
    data: {
      
      message: 'hello world!',
      isShow:true,
    }
  })
script>
body>
html>

3.3 运行结果

六、Vue条件判断_第2张图片
六、Vue条件判断_第3张图片
六、Vue条件判断_第4张图片

你可能感兴趣的:(Vue)