实现思路：我用的是element ui，实现方法和html一样。
1、给右侧小眼睛设置一个点击事件，通过点击事件修改密码输入框<el-input>的：type属性，：type的值在data里设置一个passworedtype属性，进行双向绑定，值为password时密码是密文形式，值为空显示。
2当data中passwordtype值变化时，眼睛小图标根据值变换样式，根据三目运算符。
3在点击事件方法使用this.$nextTick重新渲染dom元素
具体代码:
<el-form-item prop="password"> <span class="svg-container"> <svg-icon icon-class="password" /> </span> <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" /> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> </span> </el-form-item>
方法
记得在data里面设置一个posswordtype值。
methods: { showPwd() { if (this.passwordType === 'password') { this.passwordType = '' } else { this.passwordType = 'password' } this.$nextTick(() => { this.$refs.password.focus() }) },
