在uniapp中获取多个数字输入框的值，可通过v-model双向绑定数组实现，首先在data中定义数组变量，如inputValues: []，每个输入框绑定数组对应元素，如v-model="inputValues[index]"，若输入框数量固定，可直接按索引绑定；若动态生成，需结合v-for循环，通过index或唯一标识关联数据，获取时直接使用this.inputValues即可得到所有值数组，也可通过ref获取输入框DOM节点，遍历读取其value属性，但v-model方式更简洁高效，推荐优先使用。
- 修正错别字与语法错误：修正了明显的错别字、标点符号错误和语法不通顺之处。
- 修饰语句：优化了句式结构，使表达更清晰、流畅、专业,增强可读性。
- ：
- 增加了实际应用场景的描述,让读者更容易理解用途。
- 补充了动态场景的完整代码示例（模板、脚本、样式），包括添加/删除输入框的功能。
- 增加了输入验证的详细说明和代码示例（非负数、整数范围）。
- 补充了性能优化建议（如防抖）。
- 增加了常见问题与解决方案部分。
- 丰富了核心逻辑说明和部分。
- 提升原创性：
- 对代码示例进行了结构优化和逻辑完善（如使用唯一ID作为key，更健壮的验证逻辑）。
- 提供了多种实现方式的对比（数组索引 vs 对象属性）。
- 增加了更深入的技巧说明（如
@inputvs@change，防抖应用）。 - 重新组织了文章结构，使其逻辑更清晰、层次更分明。
以下是优化后的完整文章：
Uniapp 高效获取多个数字输入框值的实用方法与技巧
在 Uniapp 开发中，表单处理是日常需求的核心环节，特别是在处理商品数量、用户评分、系统参数设置等场景时，如何高效、准确地同时管理多个数字输入框的值，直接关系到应用的健壮性和用户体验，本文将结合丰富的代码示例，深入探讨 Uniapp 中获取多个数字输入框值的多种实现策略，涵盖静态表单、动态表单、数据验证及性能优化等关键场景，助您快速掌握核心技巧,提升开发效率。
基础实现：数组索引绑定（固定数量输入框）
当输入框数量固定且已知时（需要用户输入3个固定参数值），使用数组并通过索引进行 v-model 绑定是最直接、高效的方式。
模板结构 (template)
在模板中，利用 v-for 循环渲染多个 <input> 组件，设置 type="number" 限制输入为数字类型，并通过 v-model 绑定到数组对应索引的元素,添加事件监听器以实现实时验证或反馈。
<template>
<view class="container">
<view class="title">请输入参数值（数字）</view>
<view class="input-list">
<!-- 循环渲染3个输入框 -->
<view v-for="(value, index) in inputValues" :key="`input-${index}`" class="input-item">
<text class="label">参数 {{ index + 1 }}：</text>
<input
type="number"
v-model="inputValues[index]"
placeholder="请输入数字"
class="input"
@input="handleInput(index, $event)"
/>
</view>
</view>
<button @click="getValues" class="submit-btn">获取所有值</button>
<view class="result" v-if="result.length > 0">
<text>输入结果：</text>
<text>{{ result.join(', ') }}</text>
</view>
</view>
</template>
关键点说明：
key="input-${index}": 为每个循环项提供稳定且唯一的 key，有助于 Vue 高效更新 DOM。v-model="inputValues[index]": 直接绑定到数组索引,确保数据同步。@input="handleInput(index, $event)": 监听输入事件,可在此处进行实时验证或处理。
数据定义与逻辑 (script)
在脚本部分，初始化数组存储输入框值，并实现获取值、输入验证等方法。
<script>
export default {
data() {
return {
// 存储固定数量(3个)输入框的值，初始为空字符串
inputValues: ['', '', ''],
result: [], // 存储获取到的有效数字结果
errors: {} // 存储各输入框的错误信息（可选）
}
},
methods: {
// 获取所有输入框的值并进行处理
getValues() {
// 过滤掉空值（根据需求决定是否允许空值）
const nonEmptyValues = this.inputValues.filter(val => val !== '');
// 转换为数字类型（input的v-model绑定的是字符串）
const numbers = nonEmptyValues.map(val => {
const num = Number(val);
return isNaN(num) ? 0 : num; // 处理非数字输入，默认为0
});
this.result = numbers;
if (numbers.length === 0) {
uni.showToast({
title: '请至少输入一个有效数字',
icon: 'none'
});
} else {
uni.showToast({
title: `获取成功：${numbers.join(', ')}`,
icon: 'success'
});
}
},
// 处理单个输入框变化（实时验证示例）
handleInput(index, event) {
const inputValue = event.detail.value; // 获取输入值（字符串）
const numValue = Number(inputValue);
// 清除该输入框之前的错误
this.$set(this.errors, index, '');
// 验证逻辑示例：值必须为非负数
if (inputValue !== '' && numValue < 0) {
this.$set(this.errors, index, '数值不能小于0');
// 可选：重置输入框为0或阻止负数输入
this.$set(this.inputValues, index, '0');
uni.showToast({
title: '数值不能小于0',
icon: 'none'
});
return;
}
// 验证逻辑示例：值必须为整数（可选）
if (inputValue !== '' && !Number.isInteger(numValue)) {
this.$set(this.errors, index, '请输入整数');
// 可选：可以在这里处理，如四舍五入或提示
// this.$set(this.inputValues, index, Math.round(numValue).toString());
uni.showToast({
title: '请输入整数',
icon: 'none'
});
return;
}
// 更新数组值（如果验证通过或输入为空）
this.$set(this.inputValues, index, inputValue);
}
}
}
</script>
关键点说明：
inputValues: ['', '', '']: 初始化数组,长度与输入框数量一致。$set(this.inputValues, index, newValue): 使用 Vue 的响应式方法$set更新数组元素，确保视图更新
