vue项目实战之点击小眼睛实现input密码框内容显示与隐藏

实现思路：我用的是element ui，实现方法和html一样。

1、给右侧小眼睛设置一个点击事件，通过点击事件修改密码输入框的：type属性，：type的值在data里设置一个passworedtype属性，进行双向绑定，值为password时密码是密文形式，值为空显示。

2当data中passwordtype值变化时，眼睛小图标根据值变换样式，根据三目运算符。

3在点击事件方法使用this.$nextTick重新渲染dom元素

具体代码:

 方法

记得在data里面设置一个posswordtype值。

  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },