Vueでパスワードの表示と非表示機能を実装するアイデアを詳しく解説

効果：

アイデア:

入力タイプ属性を使用して、タイプ値がテキストの場合はパスワードを表示し、タイプ値がパスワードの場合はパスワードを非表示にします。
したがって、v-bind を使用して型をバインドし、三項式の形式で記述されたブール値を使用して型を制御することは簡単に考えられます。
画像要素を追加し、アイコン要素をクリックしてブール値を切り替えることで、表示と非表示を切り替える効果が得られます。ブール値を切り替えると、アイコンも切り替わります。

ページレイアウト

<div id='アプリ'>
    <!-- 三項式 pwdFlag が true の場合、タイプはパスワードで、パスワードは非表示になります。pwdFlag が false の場合、タイプはテキストで、パスワードが表示されます。 -->
    パスワード: <input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag が true の場合、パスワードは非表示になり、目が開いたアイコンが表示されます。そうでない場合は、目が閉じたアイコンが表示されます -->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>

JSコード

新しいVue({
  el:'#app',
  データ：{
    pwdFlag:true,//パスワードフラグがtrueの場合、現在のパスワードはパスワード形式です textIcon:'./images/show.jpg',//アイコンを表示 pwdIcon:'./images/hide.jpg',//アイコンを非表示},
  方法:{
    //パスワード表現の変更 changePwd:function(){
      //パスワード フラグを反転します this.pwdFlag=!this.pwdFlag;
    }
  }
})

完全なコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
</head>
<スタイル>
 
</スタイル>
<本文>
  <div id='アプリ'>
    <!-- 三項式 pwdFlag が true の場合、タイプはパスワードで、パスワードは非表示になります。pwdFlag が false の場合、タイプはテキストで、パスワードが表示されます。 -->
    パスワード: <input :type='pwdFlag?"password":"text"' size='10'>
    <!--pwdFlag が true の場合、パスワードは非表示になり、目が開いたアイコンが表示されます。そうでない場合は、目が閉じたアイコンが表示されます -->
       <img :src='pwdFlag?textIcon:pwdIcon' @click="changePwd" style="width:16px;">    
  </div>
</本文>
<script src="vue.js"></script>
<スクリプト>
新しいVue({
  el:'#app',
  データ：{
    pwdFlag:true,//パスワードフラグがtrueの場合、現在のパスワードはパスワード形式です textIcon:'./images/show.jpg',//アイコンを表示 pwdIcon:'./images/hide.jpg',//アイコンを非表示},
  方法:{
    //パスワード表現の変更 changePwd:function(){
      //パスワード フラグを反転します this.pwdFlag=!this.pwdFlag;
    }
  }
})
 
</スクリプト>
</html>

Vue でパスワードの表示と非表示機能を実装するアイデアの詳細説明については、これで記事を終了いたします。Vue でパスワードの表示と非表示を実装することに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: