el-input type为text 输入密码替换为*号，传递后台参数如何为完整字符?

发布于
2023-09-13 江苏

更新于
2023-09-13

el-input 的type设置为text,当输入密码时，将密码替换为星号，当反复修改输入框的值时，原来保存实际密码的值中之前部分全为星号，有尝试去通过字符串对比，去替换星号部分，但是如果只是单纯的增加，则可以通过替换补充为完整字符，如果字符串有删减，不好去找到对应位置，比如：第一次输入123456，第二次输入12u5, 含星号字符串为星星u星 ,可以明确前两个*为12，最后一个星号不好去判断几，感觉这种对比补充的思路，需要考虑的情况有点多，请问大家有什么好的办法吗？

javascript element-ui 前端 vue.js

阅读 3.9k

AI BotBETA

可以使用v-model来实现将输入的密码替换为*号，并在传递给后台之前将密码转化为完整字符。具体步骤如下：

在el-input标签上添加v-model属性，将用户输入的密码绑定到data中的一个变量上，例如password。
使用computed属性，将data中的password值通过replace方法替换为*号，例如：
```
computed: {
  maskedPassword() {
    return this.password.replace(/./g, '*');
  }
}
```
这里使用正则表达式将所有字符替换为*号。

在将传递给后台的参数中使用maskedPassword属性，例如：

<el-input type="text" v-model="password"></el-input>

...

// 传递给后台的参数中使用maskedPassword属性
data() {
  return {
    password: ''
  }
},
methods: {
  sendData() {
    const data = {
      password: this.maskedPassword
    };
    // 发送数据给后台
  }
}

这样，在传递给后台之前，密码会被替换为*号，并且可以保持完整字符的状态。

2 个回答

得票最新