uni-app input类型为number时，改变输入内容后输入的值一直是文本类型，应是数字类型

uni-app input类型为number时，改变输入内容后输入的值一直是文本类型，应是数字类型

开发环境 版本号 项目创建方式
Windows 10.0.18363.1237 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.0.7

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：小米10

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：


<template>  
    <view class="content">  
        <view class="text-area">  
            <input type="number" placeholder="数量" v-model="objData.Qty" />  
            <button @click="handle">按钮</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                objData: {  
                    Qty: 0  
                }  

            }  
        },  
        onLoad() {  

        },  
        methods: {  
            handle() {  
                console.log(this.objData.Qty, typeof this.objData.Qty)  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  
</style>

操作步骤： 改变输入框类型，点击按钮，会打印出数值类型结果 typeof this.objData.Qty="string"

预期结果： typeof this.objData.Qty="number"

实际结果： typeof this.objData.Qty="string"

bug描述： input类型为number时，改变输入内容后输入的值一直是文本类型


更多关于uni-app input类型为number时，改变输入内容后输入的值一直是文本类型，应是数字类型的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

v-model.number了解一下吧

更多关于uni-app input类型为number时，改变输入内容后输入的值一直是文本类型，应是数字类型的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX alpha 版本号： 3.1.0 ，小米8 Android 10 ，未复现您说的问题。

input类型为number时，改变输入框内容后 绑定的数据变成string类型，应该为number类型，PC，APP都这样

这是一个常见的uni-app问题，input组件的type="number"在移动端确实会返回字符串类型。这是因为HTML5规范中，input的value始终是字符串类型，即使type设置为number。

解决方案有以下几种：

  1. 使用parseInt或parseFloat转换：
handle() {
  const numValue = parseInt(this.objData.Qty) || 0;
  console.log(numValue, typeof numValue); // 数字类型
}
  1. 使用.number修饰符（推荐）：
<input type="number" v-model.number="objData.Qty" />
  1. 使用计算属性自动转换：
computed: {
  qtyNumber() {
    return Number(this.objData.Qty) || 0;
  }
}
回到顶部