- 前記事: 15. パスワードのマスクを解除する
- 次記事: 17. [いいね]ボタンを押すとボタンが文言に変わる
16. パスワードを入力中だけ表示する
- Vue.jsバージョン: 2.5.2
- 入力中だけパスワードのマスクが解除されます。
- EnterやTabを押して入力を終えると再びマスクされます。
サンプルコード
ポイント: コード中のdebounceはLodash.jsのメソッドで、このような一定時間入力がないときの処理を書くのに使えます。このため、このサンプルの実行にはLodash.jsも必要です。
methods: {
c: _.debounce(function() {
this.t = "password"
this.$nextTick(function() { this.$refs.r1.focus() })
}, 1000 * 1),
},
- 前記事: 15. パスワードのマスクを解除する
- 次記事: 17. [いいね]ボタンを押すとボタンが文言に変わる
バックナンバー（Vue.jsサンプルコード）
- Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
- Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
- Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
- Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
- Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
- Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
- Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
- Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
- Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
- Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
- Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
- Vue.jsサンプルコード（15）パスワードのマスクを解除する
- Vue.jsサンプルコード（16）パスワードを入力中だけ表示する