登入頁隱藏密碼位數 Vue

2021-09-25 12:16:19 字數 966 閱讀 1458

需求:使用者輸入密碼時所展示的密碼長度和實際輸入位數長度不同。

解決思路:每當輸入一位時,隨機生成1~5位的字串加入之前所輸入值後面,並且記錄所產生的隨機字串長度,以便刪除時使用。

解決方式:

1. input 加入on-change事件(iview寫法)

2.當輸入值變化時進行資料處理

data(),

passwordcover: , // 插入值的長度

passwordreal: '', // 實際的密碼

oldpassword: '', // 舊假密碼

}}, methods:

this.passwordreal += this.form.password.slice(-1); // j將最後一位值(新輸入的值)加入實際密碼中

// 隨機生成1~5位·

let result = '';

let length = math.ceil(math.random() * 5);

this.passwordcover.push(length);

while (length + 1 > 0)

// 刪除form.password中新輸入的密碼 (也可以不刪除,這麼寫是因為我有特殊需要)

this.form.password = this.form.password.slice(0, -1);

this.form.password += result; // 將剛剛隨機生成的字串新增到form.password中

this.oldpassword = this.form.password; // 更換新的舊密碼值

} else

},deletedata () ,

}

儲存時,只需要儲存this.passwordreal 便可

vue 登入介面記住密碼

html部分 class ms login model ruleform rules rules ref ruleform label width 0px class demo ruleform prop username v model ruleform.username placeholder ...

vue 炫酷登入 vue粒子效果的登入頁實現

hello,親愛的兄弟姐妹們,時隔幾天在工作之餘,終於把登入頁面寫出來了 暫不考慮資料互動 說起這幾天的學習經歷,那真是一把鼻涕一把淚。今天我就把開發過程中用到的知識點,和踩得坑 跟小夥伴們分享一下,也給想自己動手實現乙個炫酷效果的小夥伴乙個指引。下面講下我是如何實現的。開始之前最好先理清乙個概念,...

vue中登入頁按enter鍵直接登入

寫部落格是為了記筆記!html 樣式部分可以不用管,主要是乙個click方法和乙個keyup.enter的方法要注意 login btn click submit loginform keyup.enter submit margin left 12 登入 js created中新增鍵盤事件 cre...