v-if和v-show

概述

• 基本使用v-if、v-else-if、v-else
• 案列：可以切换使用用户账号登录还是邮箱地址登录。
• v-show与v-if

6.1. 基本使用v-if、v-else-if、v-else

6.1.1. v-if、v-else-if、v-else

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

6.1.2. v-if的原理：

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

6.1.3. 简单的案例演示：

<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h1 v-else>isShow为false，显示我</h1>

  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>

  <h1>{{result}}</h1>
</div>

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

6.2. 条件渲染案例

6.2.1. 做一个简单的小案例：

• 用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号：</label>
<!--    加key保证input输入框不会复用-->
    <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="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    },

  })
</script>

初始：

image.png

点击后：

在这里插入图片描述

6.2.2. 小问题：

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

6.2.3. 问题解答：

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

6.2.4. 解决方案：

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

6.3. v-show

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

• v-if和v-show对比

• v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

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

• 开发中如何选择呢？

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

<div id="app">
<!--  两种方式为false时消失的方式不同
      v-if:当条件为false时，包含v-if指令的元素根本就不会存在在dom中
      v-show: 当条件为false时，只是给元素增加了一个行内样式display：none
      -->
  <h2 v-if="isShow" id="aaa">{{message}}</h2>
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

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

转自:https://blog.csdn.net/weixin_45333934/article/details/107457146