#####vue.jsを用いてパスワードを自動生成するプログラムを作成するという課題をしています。
作成に当たって、テキストボックスが1つ作り、そのテキストボックスに入力された数値を文字数としてランダムなパスワード文字列を生成するプログラムを作成し、テキストボックスの数値が変更されるたびに新たなパスワード文字列が自動生成されるようにしました。(テキストボックスの初期値は8としてます。)
また、条件として
「テキストボックスに入力された文字数の分だけ、ループするようにしてください。1回のループで、以下のような処理を行います:
0から61までのランダムな数を取得:
Math.floor(Math.random() * 62) を使えばOKです。
補足すると、Math.random() は0以上1未満のランダムな小数値を取得するメソッドです。その値を62倍にします。さらに、Math.floor() のメソッドを使って、小数点以下を切り捨てます。これで、0から61までのランダムな数を取得できます
Stringオブジェクトのsliceメソッドでlettersから1文字取得:
たとえば、文字列の変数 a の先頭から x 番目にある1文字を取り出したい場合は、a.slice(x, x + 1) と書けばOKです」
というものがでています。
以下が現在のコードです。
数値を入力するとその桁数に合わせたパスワード生成は完成したのですが、上記のsliceを用いる方法ではありません。どのように取り入れればいいでしょうか?
html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js Test</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="example"> <p> パスワードの文字数:<br> <input v-model="password_length" type="text" > </p> <p>生成されたパスワード:{{ password }}</p> </div> <script src="main.js"></script> </body> </html>
js
const letters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; const app = new Vue({ el: '#example', data: { password_length: 8, }, methods: { password() { let result = ''; for (var i = 0; i < this.password_length; i++) { result += letters[Math.floor(Math.random() * letters.length)]; } return result; }, }, });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/06 09:00