登入切換小案例,key
阿新 • • 發佈:2020-08-21
<!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>