密码输入的显示和隐藏（显示*）

原创于 2017-04-19 13:07:52 发布 · 4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种通过切换 input 类型实现密码输入显示与隐藏的方法。利用 Vue.js 的 v-on:click 实现点击切换 type 属性，从而在密码显示与隐藏之间进行转换。

密码输入的显示和隐藏（显示*）

<figure class="password hidenpwd">

<input type="password" v-model="oldpassword" class="input input_psd input_name pwd_eye" name="oldpassword" placeholder="当前密码" value="" minlength="6" maxlength="16" tabindex="2" />

<i v-on:click="changeeye"></i>

</figure>

<figure class="password showpwd hide1">

<input type="text" v-model="oldpassword" class="input input_psd input_name pwd_eye" name="oldpassword" placeholder="当前密码" value="" minlength="6" maxlength="16" tabindex="2" />

<i v-on:click="changeeye"></i>

</figure>

同样的input，type类型，一个人是password，一个是text，点击切换隐藏显示就好了

<i>标签是密码的显示隐藏标签

v-on:click是vue.js中定义事件的方法