1. 程式人生 > 程式設計 >vue實現登入型別切換

vue實現登入型別切換

本文例項為大家分享了vue實現登入型別切換的具體程式碼,供大家參考,具體內容如下

執行效果

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.com
e({ el: '#app',data: { isUser: true },methods:{ changeType(){ return this.isUser = ! this.isUser } } }) </script> </html>

程式碼片段解析

vue實現登入型別切換

以上就是本文的全部內容,希望對大家的學習有所幫助,也程式設計客棧希望大家多多支援我們。