v-if和v-else和v-else-if的使用

本文链接：https://blog.csdn.net/weixin_43613849/article/details/117464908

1、v-if

v-if的原理：

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。

也就是根本没有不会有对应的标签出现在DOM中。

<div id="app">
  <h2 v-if="isShow">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
  </h2>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isShow: true
    }
  })
</script>

当把v-if后面的条件设为false时，对应的元素以及其子元素不会渲染

2、v-else

当把isShow设置为false的时候，显示v-else-if的内容

  <div id="app">
    <h2 v-if="isShow">
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
    </h2>
    <h1 v-else="isShow">isShow为false的时候显示我
    </h1>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        isShow: false
      }
    })
  </script>

当把isShow设置为true的时候，显示v-if的内容

3、v-else-if

v-else-if的使用可以通过computed实现如下：

  <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>
    <h2>{{result}}</h2>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        score: 88
      },
      computed: {
        result() {
          if (this.score >= 90) {
            return '优秀';
          } else if (this.score >= 80) {
            return '良好';
          }
          else if (this.score >= 60) {
            return '及格';
          } else {
            return '不及格';
          }
        }
      }
    })
  </script>

4、用户登录切换的案例

  <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="ChangeStatus()">切换类型</button>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isUser: true
      },
      methods: {
        ChangeStatus() {
          this.isUser = !this.isUser;
        }
      }
    })
  </script>