首先将输入框的type设置为text,设置为password就只能显示为小圆点

<el-form

ref="form"

:model="form"

:rules="loginRules"

label-width="0px"

class="loginForm"

>

<el-form-item prop="phone">

    <el-input

        v-model="form.phone"

        placeholder="请输入账号"

        clearable

    ></el-input>

</el-form-item>

<el-form-item prop="pwd">

    <el-input

        v-model="form.pwd"

        placeholder="请输入密码"

        clearable

        type="text"

    ></el-input>

</el-form-item>

</el-form>

 然后监听登录的密码输入框，将密文显示为*（这里可以设置为任何你想要的符号）

主要思想是输入框绑定的是为*的密文，但是我们需要传给后端的是实际的密码，所以这里需要定义一个变量来存实际的密码。

"form.pwd": {

handler: function (val, oldV) {

    //监听登录的密码输入框，将密文显示为*

    this.form.pwd = this.form.pwd.replace(/./g, "*");

    if (oldV.length > val.length) {

    //进行删除操作   this.form.password就是定义在data中用来存实际密码的变量

        this.form.password = this.form.password.substring(0, this.form.password.length - 1);

    } else {

        this.form.password += val.replace(/[*]/g, "");

    }

},

deep: true,

},

最后显示出来的效果如下图：