1. 程式人生 > 實用技巧 >登入切換小案例,key

登入切換小案例,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>