el-input设置type为number

### 如何在 Element UI 中将 `el-input` 组件的类型设置为数字

为了使 `el-input` 组件能够处理数值输入并提供相应的浏览器验证功能，可以将其 `type` 属性设置为 `"number"`。这不仅改变了输入框的行为，还启用了HTML5内置的数字键盘支持以及基本的数值范围约束。

下面是一个简单的例子来展示如何配置：

<template>
  <div class="demo">
    <!-- 使用 type='number' 来指定 el-input 应该作为数字输入 -->
    <el-input 
      v-model.number="numValue"
      placeholder="请输入数字..."
      type="number"
      min="0"
      max="100"
      step="1">
    </el-input>
    
    {{ numValue }}
  </div>
</template>

<script>
export default {
  name: 'NumberInputExample',
  data() {
    return {
      // 初始化数据模型，默认值设为空字符串或null表示无初始值
      numValue: ''
    };
  }
};
</script>

在这个实例中，通过向 `<el-input>` 添加 `type="number"` 参数指定了这是一个用于接收数字类型的输入控件[^3]。此外，还可以利用其他属性如 `min`, `max`, 和 `step` 对允许输入的具体数值加以限制。值得注意的是，在这里也应用了 `.number` 修改符到 `v-model` 上，这样即使用户手动删除内容使得输入框为空时，绑定的数据也会被正确解析成 JavaScript 的 `NaN` 或者保持之前的合法状态而不是变成空串[^1]。

对于某些特定场景下的需求调整，比如希望未达到设定最小值时不显示任何内容，则可以通过监听事件或者计算属性等方式进一步自定义行为逻辑。