限制el-input只能输入数字，且保留两位小数

你可以使用 Vue 的指令 v-model 和正则表达式来实现这个功能。具体步骤如下：

1. 在 el-input 上添加 v-model 指令，绑定一个数字类型的变量，例如：`<el-input v-model="price"></el-input>`
2. 监听 el-input 的输入事件 oninput，使用正则表达式过滤非数字和小数点，保留两位小数并更新绑定的变量，例如：

<el-input v-model="price" @input="handleInput"></el-input>

...

methods: {
  handleInput(event) {
    // 过滤非数字和小数点
    let value = event.target.value.replace(/[^\d.]/g, '');
    // 保留两位小数
    value = value.replace(/^\./g, '');
    value = value.replace(/\.{2,}/g, '.');
    value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
    value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
    // 更新绑定的变量
    this.price = value;
  }
}

这样就可以限制 el-input 只能输入数字，且保留两位小数了。

相关问题

正则匹配el-input只能输入数字 保留两位小数

正则表达式是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式通常用于检索、替换那些符合某个模式（规则）的文本。在Vue.js的`el-input`组件中，可以通过设置`v-model`进行双向数据绑定，并结合`键盘事件`（如`keypress`）或者`输入事件`（如`input`）以及正则表达式来限制用户输入的格式，使得`el-input`只能输入数字并且保留两位小数。

以下是一个示例代码，展示了如何使用正则表达式来限制`el-input`只能输入数字并且保留两位小数：

<template>
  <el-input v-model="inputValue" @input="handleInput"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleInput(value) {
      // 正则表达式匹配数字且保留两位小数
      const reg = /^\d*(\.\d{0,2})?$/;
      // 如果输入不匹配，则清空输入框
      if (!reg.test(value)) {
        this.inputValue = this.inputValue.slice(0, -1); // 移除最后一个非法输入的字符
      }
    }
  }
}
</script>

在这个例子中，`handleInput`方法会在每次用户输入时被调用。通过正则表达式`/^\d*(\.\d{0,2})?$/`，我们允许输入的值从0个或多个数字开始，然后是可选的点（`.`），后面跟着最多2个小数位。如果不满足这个条件，就会清除掉不符合规则的最后一个字符。

el-input只能输入数字 且支持2位小数

`el-input` 是 Element UI 中的一个输入框组件，在Vue.js框架下常用。如果你想限制用户只能输入两位小数的数字，你可以通过设置 `type="number"` 和 `v-model.number` 或者 `number` 属性来实现基本的数字输入，并结合自定义事件或正则表达式校验来控制只能输入两位小数。

例如，在HTML模板上：

<el-input v-model.number="inputValue" :precision="2" placeholder="请输入2位小数"></el-input>

在这个例子中，`:precision="2"` 设置了最多显示的小数位数为2，而 `v-model.number="inputValue"` 确保输入始终是数字类型并保留两位小数。

然后在Vue组件里处理输入验证：

data() {
  return {
    inputValue: ''
  }
},
methods: {
  handleInputBlur(e) {
    const value = e.target.value;
    // 使用正则表达式检查是否只包含数字和两位小数
    if (/^\d+(\.\d{1,2})?$/.test(value)) {
      this.inputValue = parseFloat(value);
    } else {
      // 如果不符合要求，清除输入或者给出提示
      e.target.value = '';
      console.error('只能输入两位小数');
    }
  }
}