el-input正则显示***
时间: 2023-12-04 16:03:41 浏览: 82
vue:el-input输入时限制输入的类型操作
5星 · 资源好评率100%
可以使用Vue的计算属性和正则表达式来实现el-input正则显示***的效果。具体实现方法如下所示:
```html
<template>
<el-input v-model="inputValue" :value="displayValue" @input="handleInput"></el-input>
</template>
<script>
export default {
data() {
return {
inputValue: '', // 输入框的实际值
displayValue: '', // 输入框的显示值
regex: /[^(\-)?\d.]|^(\-)?[0]+[0-9]+$|^\.+$/g // 正则表达式,限制只能输入数字和小数点
}
},
computed: {
maskedValue() {
return this.inputValue.replace(this.regex, '*') // 将输入框的实际值中符合正则表达式的部分替换为*
}
},
methods: {
handleInput() {
this.displayValue = this.maskedValue // 将替换后的值赋给显示值
}
}
}
</script>
```
在上述代码中,我们使用了一个计算属性`maskedValue`来将输入框的实际值中符合正则表达式的部分替换为*,然后将替换后的值赋给显示值`displayValue`。同时,我们在`el-input`组件上绑定了`value`属性,这样就可以将替换后的值显示在输入框中了。
阅读全文