vue功能显示与隐藏怎么实现,vue实现忘记密码功能
本文主要介绍vue实现密码显示和隐藏功能的思路。这篇文章给大家讲的很详细，对大家的学习或者工作都有一定的参考价值。有需要的朋友可以参考一下。
效果：
思路：
使用input的type属性，当type值为text时显示密码，当type值为password时隐藏密码；
所以很容易想到用v-bind来绑定type，同时用一个布尔值来控制，用三元表达式的形式来写；
添加一个图片元素，点击图标元素切换布尔值，可以切换显示和隐藏，在切换布尔值的同时切换图标。
页面布局
div id=应用程序
！-如果三元表达式pwdFlag为真，则类型为password如果pwdFlag为false，则类型为text密码显示为-
密码：输入：type=pwdFlag？密码: text size=10
！-如果- pwdFlag为真，表示密码隐藏，显示睁眼图标；否则，会显示闭眼图标-
img :src=pwdFlag？text icon:pwd icon @ click= change pwd style= width:16px；
/div
javascript，javascript
新Vue({
埃尔： #app ，
数据：{
Pwflag: true，//密码标志为true表示当前是密码形式。
文本图标：。/images/show.jpg ，//显示图标
Pwicon:。/images/hide.jpg ，//隐藏图标
},
方法：{
//更改密码表示形式
changePwd:function(){
//把密码标记反过来就行了。
this.pwdFlag=！this . pwd flag；
}
}
})
完全码
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
/头
风格
/风格
身体
div id=应用程序
！-如果三元表达式pwdFlag为真，则类型为password如果pwdFlag为false，则类型为text密码显示为-
密码：输入：type=pwdFlag？密码: text size=10
！-如果- pwdFlag为真，表示密码隐藏，显示睁眼图标；否则，会显示闭眼图标-
img :src=pwdFlag？text icon:pwd icon @ click= change pwd style= width:16px；
/div
/body
脚本src= vue . js /脚本
脚本
新Vue({
埃尔： #app ，
数据：{
Pwflag: true，//密码标志为true，表示当前为密码形式。
文本图标：。/images/show.jpg ，//显示图标
Pwicon:。/images/hide.jpg ，//隐藏图标
},
方法：{
//更改密码表示形式
changePwd:function(){
//把密码标记反过来就行了。
this.pwdFlag=！this . pwd flag；
}
}
})
/脚本
/html
至此，本文对实现vue的密码显示和隐藏功能的思路已经介绍到这里。更多实现vue的密码显示和隐藏功能的相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。