登陆切换：将账号登陆切换为邮箱登录

 

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号label>
    <input type="text" id="username" placeholder="用户账号">
  span>
  <span v-else>
   <label for="email">用户邮箱label>
    <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添加不同的key值

<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="isUser=!isUser">切换类型button>
div>

反之，如果想要输入内容保存下来，可以不写key值或者key值相等