本文實例為大家分享了vue實現登錄類型切換的具體代碼,供大家參考,具體內容如下
運行效果
代碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!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 = "text" 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 Vue({ el: '#app', data: { isUser: true }, methods:{ changeType(){ return this.isUser = ! this.isUser } } }) </ script > </ html > |
代碼片段解析
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。
原文鏈接:https://blog.csdn.net/weixin_43582611/article/details/103418439