登录切换小案例，key 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录切换案列</title>
</head>
<body>
<div id="app">
  <span v-if='isUser'>
    <!-- 加上key 可以保障切换时input框内的内容不保持-->
    <!-- lable 内 for="userName" 可以lable聚焦-->
    <lable for="userName">用户账号</lable>
    <input type="text" id = "userName" placeholder="用户账号" key= "userName">
  </span>
  <span v-else>
    <lable for="userEmail">用户邮箱</lable>
    <input type="text" id = "userEmail" placeholder="用户邮箱" key ="userEmail" >
  </span>
  <button @click = "isUser = !isUser">切换登录类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      isUser: true,
    },
    methods: {
      sub: function () {

      }
    }
  })
</script>
</body>
</html>

 

posted @ 2020-08-21 21:45  CHUNYIN  阅读(137)  评论(0)    收藏  举报