在vue中如何实现密码显示隐藏切换功能

亚连
Lepaskan: 2018-06-05 11:17:53
asal
2670 orang telah melayarinya

这篇文章主要介绍了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>
Salin selepas log masuk

script:

data () {

 return {

  registration_data:{

   pwdType:"password",
   src:require("../assets/colse_eyes.png")
  }
 }
},
methods:{
changeType(){
 this.registration_data.pwdType = this.registration_data.pwdType===&#39;password&#39;?&#39;text&#39;:&#39;password&#39;;
 this.registration_data.src=this.registration_data.src==require("../assets/colse_eyes.png")?require("../assets/open_eyes.png"):require("../assets/colse_eyes.png");
}
}
Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue中如何使用父组件调用子组件事件

通过vuejs如何实现数据驱动视图原理

在angularjs中使用$http实现异步上传Excel文件方法

Atas ialah kandungan terperinci 在vue中如何实现密码显示隐藏切换功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!