vue 点击图标 显示/隐藏 密码
/** 仅作为 个人学习笔记 使用 留作痕迹 */ //vue 点击小眼睛 显示/隐藏 input代码 可直接copy使用 vm = new Vue({el:'#app',data:{btnshow:false,//v-show="false" 隐藏newpsd:'',//v-model input 数据双向绑定...
·
/*
* 仅作为 个人学习笔记 使用 留作痕迹
*/
//vue 点击小眼睛 显示/隐藏 input代码 可直接copy使用
vm = new Vue({
el:'#app',
data:{
btnshow:false, //v-show="false" 隐藏
newpsd:'', //v-model input 数据双向绑定
eye:true, //
inputType:'' //
},
methods:{
//点击图标 密码显示隐藏 切换
showPassword:function(){ /*密码显示 */
var me = this;
if (me.eye) {
me.eye = false
me.inputType = 'password'
} else {
me.eye = true
me.inputType = 'text'
}
}
}
})
<div id="app">
<div class="xym flex-h flex-between">
<div class="flex-h">
<div class="xym1 fz" >新密码</div>
<div class="xym2"><input :type="inputType" v-model="newpsd" placeholder="请输入您的新密码"/></div>
</div>
<div class="xym4" v-if="eye" @click="showPassword()"><img src="image/eyes.png" /></div>
<div class="xym4" v-else @click="showPassword()"><img src="image/byj.png" /></div>
</div>
</div>
更多推荐
已为社区贡献5条内容
所有评论(0)