基于某视频剪辑软件实现表单中密码输入的显示与隐藏功能

实现效果：

点击"眼睛"的时候显示与隐藏

代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' link href=' CSS/bootstrap。量滴CSS“rel=”外部no跟随“rel=”样式表脚本src=' http : js/vue。js '/脚本标题/标题样式# main { text-align 3360 center页边距-顶部：60 px}输入[type=text]，输入[type=password]{ width :260 px；高度：28 px显示器：内联块；} span { margin-left :-30px；光标：指针；}输入[type=checkbox]{ cursor:指针；opa城市3360 0；左边距：-18px；显示器：内联块；}/style/head dydiv id=' main '输入类型=' text ' class=' form-control ' v-model=' msg ' v-if=' checked '输入类型=' password ' class=' form-control ' v-model=' msg ' v-else span class=' glyphicon glyphicon-eye-open '/span输入类型=' checkbox ' v-model=' checked '/div script new Vue({ El : ' # main '，data: { msg: ')，checked/script script src=' http : js/jquery。量滴js '/script script src=' http : js/bootstrap。量滴js '/脚本/正文/html========================================================================

登录页面投入输入密码显示与隐藏实现：

效果（点击显示与隐藏进行切换):

代码：

！doctype html html head meta charset=' UTF-8 ' title/title meta name=' viewport ' content=' width=device-width，initial-scale=1，minimal-scale=1，maximum-scale=1，user-scale=no '/script src=' http : js/vue。js '/script script src=' http : js/vue-resources。js '/脚本样式正文{背景3360白色；} .main { padding-top :50 px；宽度：95%;margin:0 auto}。帐户{边框-底部：1 px实心# dfdfdf填充-top :28 px；} .帐户输入{ border : none font-size :14 px；边距-底部：5 px宽度：91.5%;高度：44px}。帐户I { width :14 pxh8 :14 px线高：14 pxfont-size :18 px显示：内嵌块；颜色：白色；背景# cdcdcdcd边界半径：50%;文本对齐：居中；字体样式：正常；} .账户PSD {宽度：81.6%；} .帐户跨度{ color: # bfbfbf右浮动：线高：40 px}/style/head body div id=' log in ' div class=' main ' div class=' account '输入类型='密码'占位符='密码class=' PSD ' v-model=' PSD ' v-if=' if display '/input type=' text ' placeholder='密码class=' PSD ' v-model=' PSD ' v-else/I v-show=' PSD ' @ click=' clearPassword()'/I span v-show=' ifDisplay ' @ click=' ifDisplay=！'' ifDisplay '隐藏/span span v-show='！ifDisplay' @click='ifDisplay=！' ifDisplay '显示/span /div /div /div脚本类型=' text/JAVAScript ' var VM=new Vue({ El : ' # log in })，data:{ username: ' '，psd: ' '，ifDisplay:false，}，methods : { clear password 3360 function(){ this。PSD=},} })/脚本/正文/html总结

以上所述是小编给大家介绍的基于某视频剪辑软件实现表单中密码输入的显示与隐藏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！