vue 点击图标 显示/隐藏 密码

/*

* 仅作为 个人学习笔记 使用 留作痕迹 

*/ 

//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>