Vue学习笔记-用户登录切换案例 

 1 <html>
 2     <body>
 3         <div id="app">
 4             <span v-if='isUser'>
 5                 <label for="username">用户账号</label>
 6                 <input type="text" id="username" placeholder="用户账号">
 7             </span>
 8             <span v-else>
 9                 <label for="email">用户邮箱</label>
10                 <input type="text" id="email" placeholder="用户邮箱">
11             </span>
12             <button @click="isUser = !isUser">切换类型</button>
13         </div>
14     </body>
15     <script>
16         const app = new Vue({
17             el: '#app',
18             data: {
19                 isUser: true
20             }
21         })
22     </script>
23 </html>

 

 

 

 1 <html>
 2     <body>
 3         <div id="app">
 4             <span v-if='isUser'>
 5                 <label for="username">用户账号</label>
 6                 <input type="text" id="username" placeholder="用户账号" key="username-input">
 7             </span>
 8             <span v-else>
 9                 <label for="email">用户邮箱</label>
10                 <input type="text" id="email" placeholder="用户邮箱" key="email-input">
11             </span>
12             <button @click="isUser = !isUser">切换类型</button>
13         </div>
14     </body>
15     <script>
16         const app = new Vue({
17             el: '#app',
18             data: {
19                 isUser: true
20             }
21         })
22     </script>
23 </html>

 

 

posted @ 2019-11-18 15:40  leahtao  阅读(299)  评论(0)  编辑  收藏  举报