这篇文章主要介绍了Vue input输入框中的值怎么变成黑点的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue input输入框中的值怎么变成黑点文章都会有所收获，下面我们一起来看看吧。
上面是自定义的组件，type 和 placeholder 分别作为参数。
type="password"
type 设置为 password 就可以显示输入值变成黑点了。
上效果图：
关于input标签样式使用的一些总结：
1、input标签选中时的光标紧贴边框的问题：
input标签默认光标会紧贴边框，设置padding样式可解决；
2、input标签选中样式：
input标签可对选中时的样式进行设置，同时要注意input标签外边框和内边框的影响。可通过box-shadow属性设置选中时的边框阴影。
3、input标签的type属性：
input标签的type属性有多个属性值：button、checkbox、file、hidden、image、password、radio、reset、submit、text
其中最常用的是password和text属性。
4、关于input密码框（type=“password”）密码隐藏和可视的封装思路：
input标签密码框模式下，默认状态是无法查看输入的密码的，都是小黑点替代，在与用户交互过程中会有诸多不便，使用户无法查看自己输入的密码，即使错误也不知道为啥错了。因此很多组件封装会加上小眼睛实现可视与隐藏的切换。
封装思路：
input标签没有小眼睛的图标，所以我们要加入小图标。
（1）父标签下包含input标签和小图标（两个小图标，一个隐藏一个可视）。父标签设置position：relative；属性。
（2）小图标设置position：absolute；属性，设置top、bottom、right、left等值调整到你想要的位置。
（3）js控制。给小图标定义点击事件，根据点击切换图标，同时切换type="text"和type="password"属性的input框。两个input框绑定同一个接收password值的字段。
关于“Vue input输入框中的值怎么变成黑点”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue input输入框中的值怎么变成黑点”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
