07 条件判断小案例

案例

点击按钮切换用户要登录的方式，分别为用户名和邮箱

<div id = app>
  <span v-if = "isUser">
    <!--for的作用为连接lable和input连接在一起，点击用户账号时光标会跳到连接在一起的输入框-->
    <lable for = "userName">用户账号</lable>
    <input type = "text" id = "userName" placeholder = "请输入用户账号">
  </span>
  
  <span v-else>
    <lable for = "email">用户邮箱</lable>
    <input type = "text" id = "email" 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>

注：input标签的复用问题。

就是在用户账户输入框中输入了一串字符，然后点击切换按钮后切换到用户邮件输入框后，在用户账户输入框中输入的字符还存在的问题。

这是因为vue在进行DOM渲染时，出于性能考虑，会尽可能复用以及存在的元素，而不是创建新的元素。

vue会把要渲染的元素先放到 vdom（虚拟DOM）中，然后再由 vdom 渲染到界面中。vue内部会尽可能的复用。

解决方法：如果不希望vue出现类似重复利用的问题，可以给对应的input添加key，而且要保证key的不同。

如下：

<div id=app>
  <span v-if="isUser">
    <!--for的作用为连接lable和input连接在一起，点击用户账号时光标会跳到连接在一起的输入框-->
    <lable for="userName">用户账号</lable>
    <input type="text" id="userName" placeholder="请输入用户账号" key="userName-input">
  </span>
  
  <span v-else>
    <lable for="email">用户邮箱</lable>
    <input type="text" id="email" placeholder="请输入用户邮箱" kty="email-input" >
  </span>
  
  <button @click = "isUser = !isUser">切换类型</button>
</div>
<script src = "../js/vue.js"></script>
<script>
  const app = new vue({
    el : "#app",
    data : {
      isUser :true,
    },
  })
</script>