介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能link href=癱ss/bootstrap.min.css", rel=癳xternal nofollow", rel=皊tylesheet"比;
& lt;才能script src=癹s/vue.js"祝辞& lt;/script>
& lt;才能title> Title</title>
& lt;才能style>
,,,#{主要
,,,,,text-align:,中心;
,,,,,margin-top: 60 px;
,,,}
,,,输入(type=文本),输入(type=密码){
,,,,,宽度:260 px;
,,,,,身高:28 px;
,,,,,显示:,inline-block;
,,,}
,,,跨度{
,,,,,margin-left: -30 px;
,,,,,光标:,指针;
,,,}
,,,输入(type=复选框){
,,,,,光标:,指针;
,,,,,不透明度:,0;
,,,,,margin-left: -18 px;
,,,,,显示:,inline-block;
,,,}
& lt;才能/style>
& lt;/head>
& lt; body>
& lt; div id=癿ain"祝辞
,,,& lt; input 类型=皌ext",类=癴orm-control", v模型=癿sg", v=癱hecked"比;
,,,& lt; input 类型=皃assword",类=癴orm-control", v模型=癿sg", v-else>
,,,& lt; span 类=癵lyphicon glyphicon-eye-open"祝辞& lt;/span>
,,,& lt; input 类型=癱heckbox",, v模型=癱hecked"比;
& lt;/div>
& lt; script>
Vue ({new 才能;
,,,埃尔:“# main"
,,,数据:{
,,,,,味精:““,
,,,,,检查:假的
,,,},
,,,方法:{
,,,}
,,});
& lt;/script>
& lt;才能script src=癹s/jquery.min.js"祝辞& lt;/script>
& lt;才能script src=癹s/bootstrap.min.js"祝辞& lt;/script>
& lt;/body>
& lt;/html> & lt; ! doctype html>
& lt; html>
& lt;才能head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title> & lt;/title>
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=no",/比;
,,,& lt; script src=癹s/vue.js"祝辞& lt;/script>
,,,& lt; script src=癹s/vue-resource.js"祝辞& lt;/script>
,,,& lt; style>
,,,,,身体{
,,,,,,,背景:白色;
,,,,,}
,,,,,.main {
,,,,,,,padding-top: 50 px;宽度:95%,利润率:0,汽车;
,,,,,}
,,,,,.account {
,,,,,,,边界底部:1 px solid # dfdfdf; padding-top: 28 px;
,,,,,}
,,,,,输入{.account
,,,,,,,边界:没有,字体大小:14 px; margin-bottom: 5 px;宽度:91.5%;高度:44 px;
,,,,,}
,,,,,.account 我{
,,,,,,,宽度:14 px;
,,,,,,,身高:14 px;
,,,,,,,行高:14 px;
,,,,,,,字体大小:18 px;
,,,,,,,显示:inline-block;
,,,,,,,颜色:白色;
,,,,,,,背景:# cdcdcd;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关vue如何实现表单中密码输入的显示与隐藏功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
实现效果:
点击“眼睛”的时候显示与隐藏
代码:
=====================================
登录页面输入输入密码显示与隐藏实现:
效果(点击显示与隐藏进行切换):
代码:
