Vue条件判断

Vue条件判断

1. v-if

  <div id="app">
    <h1 v-if="showed">Hello World1!</h1>
    <h1 v-if="!showed">Hello World2!</h1>
  </div>
  <script>
    const vue = new Vue({
        el: '#app',
        data: {
            showed: true,
        },

    });
  </script>

因为!showed = false 所以Hello World2!没有显示

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

<div id="app">
  <h1 v-if="showed">Hello World1!</h1>
  <h1 v-else>Hello World2!</h1>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            showed: true,
        },

    });
</script>

3. v-if、 v-else-if 和 v-else

<div id="app">
  <h1 v-if="score>90">优秀</h1>
  <h1 v-else-if="score>80">良好</h1>
  <h1 v-else-if="score>=60">及格</h1>
  <h1 v-else>不及格</h1>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            score: 99,
        },

    });
</script>

4. 用户类型切换案例

  <div id="app">
    <span v-if="user">
      <label>用户账户登录</label>
      <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
      <label>用户邮箱登录</label>
      <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="user = !user">切换类型</button>
  </div>
<script>
  const vue = new Vue({
      el: '#app',
      data: {
          user: true
      }
  });
</script>

一开始

点击切换类型

有个问题当在用户账户输入东西时，切换类型后，input里面保留之前的值。


原因：
1.这是Vue进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素，会对比这个元素有没有发生变化，如果有则重新创建，如果没有则复用。
2.在这个案例中，Vue内部会发现原来的input不再使用，之间作为else中的input来使用了。
解决:
可以给定input添加不同的key，避免复用。

  <div id="app">
    <span v-if="user">
      <label>用户账户登录</label>
      <input type="text" id="username" placeholder="用户账号" key="account">
    </span>
    <span v-else>
      <label>用户邮箱登录</label>
      <input type="text" id="email" placeholder="用户邮箱" key="email">
    </span>
    <button @click="user = !user">切换类型</button>
  </div>
<script>
  const vue = new Vue({
      el: '#app',
      data: {
          user: true
      }
  });
</script>

切换类型后

5. v-show

作用: 与v-if类似，用来条件判断

<div id="app">
  <h1 v-show="showed">Show</h1>
  <h1 v-if="showed">If</h1>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            showed: true,
        },

    });
</script>

区别：
当条件位false的时候，
v-if是把元素去除，
v-show 是把元素隐藏display: none

<div id="app">
  <h1 v-show="showed">Show</h1>
  <h1 v-if="showed">If</h1>
</div>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            showed: false,
        },

    });
</script>

开发中如何选择：
如果需要在现实与隐藏之间切换很频繁，则使用v-show
当只有一次切换时，通常使用v-if