Vue 修改类型使密码显示隐藏及图标变化

Vue 通过修改input的类型,达到密码显示隐藏,还有图标的变化。
显示效果:

隐藏
显示
html

  • class="psd" :type="pwdType" placeholder="请输入新密码" @on-change="password" maxlength="18" v-model="password"> "openeye" class="eye" alt="" @click="changeType()">
  • JavaScript

    <script>
      export default {
        data() {
          return {
            pwdType: 'password', // 密码类型
            openeye: require('@/assets/eye.png'), //图片地址
    
          }
        },
        methods: {
          changeType() {
            this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
            this.openeye = this.openeye == require("@/assets/eye.png") ? require("@/assets/eye.png") : require("@/assets/neye.png");
          },
        }
      }
    script>

    你可能感兴趣的:(Vue)