实现思路：我用的是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()
      })
    },