Day13——v-if、v-else、v-else-if条件判断

爱被打了一巴掌 2023-02-27 12:10 30阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. 条件判断
 *   *  2.1 v-if的简单使用
     *  2.2 v-else的使用
     *  2.3 v-if、v-else、v-else-if的使用
 *  三. 用户登录切换小案例
 *   *  3.1 效果
     *  3.2 例子
     *  3.3 input复用
 *  四. v-show与v-if

# 一. 回顾 #

前面学些了[Day12——v-on事件监听][Day12_v-on]，今天学习v-if、v-else、v-else-if条件判断

# 二. 条件判断 #

**v-if、v-else-if会根据表达式的true or false在DOM中渲染 或 销毁 元素或组件**

## 2.1 v-if的简单使用 ##

**当`v-if`的表达式为true时，才会起作用。**

例子：

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

效果：  
![在这里插入图片描述][20200717145550908.jpg]

## 2.2 v-else的使用 ##

**v-else的表达式可写可不写,若有多个else，则离if最近的那个else有效**

例子：

<body>
    <div id="app">
      
      <h2 v-if="isShow">
         {
       {message}}
      </h2>
      
      <h2 v-else="isShow">isShow为false的时候，显示我2</h2>
      <h2 v-else>isShow为false的时候，显示我</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script> const app = new Vue({ el: '#app', data: { message: '你好啊', isShow: true, } }) </script>
    </body>

效果:  
![在这里插入图片描述][20200717145550908.jpg]

## 2.3 v-if、v-else、v-else-if的使用 ##

例子：

<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>
    </div>
    <script src="../js/vue.js"></script>
    <script> const app = new Vue({ el: '#app', data: { score: 98 } }) </script>
    </body>

效果:  
![在这里插入图片描述][2020071714564576.jpg]

# 三. 用户登录切换小案例 #

## 3.1 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

## 3.2 例子 ##

<body>
    <div id="app">
      <span v-if="isUser">
        <label for="username">用户账号</label>
        <input type="text" placeholder="用户账号" id="username">
      </span>
      <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" 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>

## 3.3 input复用 ##

现在这个案例 **遇到一个问题**，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]  
**疑问解答**：

这是因为Vue进行DOM渲染的时候，**出于性能考虑**，会尽量复用已经存在的元素，而不是创建新的元素。在上述案例中，Vue内部发现原来的input不再使用了，要换成另一个input，但是也发现可以复用，因此作为else中的input出现。这里涉及**虚拟DOM**，笔者不太了解，所以只能模糊作下此笔记，后面有空会补回。

# 四. v-show与v-if #

**两者的作用**：

*  v-show的作用：决定一个元素是否渲染。当v-show的表达式为false时，它会将元素的`display`属性设为`none`。
 *  v-if的作用：当v-if的表达式为false时，它不会创建元素，根本没有对应的元素被创建出来。

**如何选择v-show与v-if？**

当需要频繁切换显示与隐藏时，使用v-show。当只有一次切换时，使用v-if

**例子**：

<body>
    <div id="app">
      
      <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>
    </body>

效果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]

[Day12_v-on]: https://blog.csdn.net/qq_40634846/article/details/107407353
[20200717145550908.jpg]: /images/20230209/d915b9a843604fefabd09e45962c7fb1.png
[2020071714564576.jpg]: https://img-blog.csdnimg.cn/2020071714564576.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200717145909109.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200717150404584.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200717150522652.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200717151635655.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70