vueでパスワードの表示・非表示切り替え機能を実装する方法

この記事では主に Vue で実装されたパスワードの表示と非表示の切り替え機能を紹介します。必要な方は参考にしてください。

まずレンダリングを共有します:

以下の通り:

html:

<group>
  <span>设置密码</span>
  <x-input :type="this.registration_data.pwdType"  placeholder="请填写密码" @on-change="password"></x-input>
　<img :src="this.registration_data.src" @click="changeType()"/>
</group>

script:

data () {

 return {

  registration_data:{

   pwdType:"password",
   src:require("../assets/colse_eyes.png")
  }
 }
},
methods:{
changeType(){
 this.registration_data.pwdType = this.registration_data.pwdType==='password'?'text':'password';
 this.registration_data.src=this.registration_data.src==require("../assets/colse_eyes.png")?require("../assets/open_eyes.png"):require("../assets/colse_eyes.png");
}
}

上記は私がまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

Vue で親コンポーネントを使用して子コンポーネント イベントを呼び出す方法

vuejs を通じてデータ駆動型ビューの原則を実装する方法

$http を使用して Excel ファイルの非同期アップロードを実装するangularjs

以上がvueでパスワードの表示・非表示切り替え機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。