vue實現登入型別切換
阿新 • • 發佈:2021-04-23
本文例項為大家分享了vue實現登入型別切換的具體程式碼,供大家參考,具體內容如下
執行效果
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登入型別切換</title> <script src="../js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <span v-if="isUser"> <label for="userAccount">使用者賬戶:</label> <input type="te程式設計客棧xt" id="userAccount" placeholder="請輸入賬戶" key="userAccount"> </span> <span v-else> <label for="userEmail">使用者郵箱:</label> <input type="text程式設計客棧" id="userEmail" placeholder="請輸程式設計客棧入郵箱" key="userEmail"> </span> <button @click="changeType">切換型別</button> </div> </body> <script> const app = new Vuwww.cppcns.come({ el: '#app',data: { isUser: true },methods:{ changeType(){ return this.isUser = ! this.isUser } } }) </script> </html>
程式碼片段解析
以上就是本文的全部內容,希望對大家的學習有所幫助,也程式設計客棧希望大家多多支援我們。