uni-app 微信小程序中 v-model 添加 number 修饰符不起作用，但在web中起作用。

操作步骤：

C=a+b+c
C=1+2+3 = 6

预期结果：

C=a+b+c
C= 1+2+3 = 6

实际结果：

C=a+b+c
Web端：C = 1+2+3 = 6
小程序端： C = 1+2+3 = “123”

bug描述：

微信小程序中 v-model 添加 number 修饰符，不起作用。但是在web中起作用。
使用的input组件，绑定了v-model.number，便于进行数值相加运算。
在浏览器Web端，运行正常，可以正确实现数字的相加。
但是，在微信小程序端却是字符串的拼接。
实现的功能为，输入三角形的三条边，计算三角形的边长。

ionicwang 1楼•15 天前

请升级至HBuilder X 3.4.7试下

yibo5220 2楼•15 天前

依然不行。

ionicwang 3楼•15 天前

那你自己转一下

sinazl 4楼•15 天前

确实，如果使用Number函数可以实现数值字符串转为数值类型。但是，这从另一个方面说明uniapp在微信小程序端的v-model.number是失效的。

yuanlaile 5楼•15 天前

未复现此问题，建议新建空项目单独测试下，如果还有问题，请提供下简单可复现示例（上传附件），【社区问题优先级规则】

ionicwang 6楼•15 天前

<template> <view class="fui-wrap"> <view class="fui-page__hd"> <view class="fui-page__title">三角形周长</view> <view class="fui-page__desc">三角形周长 C = a + b + c，其中a、b、c为三角形的边长</view> </view> <view class="fui-page__bd">

        <view class="fui-section__title">输入三角形的边长</view>  
        <fui-input textRight required label="三角形边长 a" borderTop placeholder="请输入边长 / m" clearable  
            v-model.number="a">  
        </fui-input>  
        <fui-input textRight required label="三角形边长 b" placeholder="请输入边长 / m" clearable v-model.number="b">  
        </fui-input>  
        <fui-input textRight required label="三角形边长 c" :bottomLeft="0" placeholder="请输入边长 / m" clearable  
            v-model.number="c">  
        </fui-input>  

        <view class="fui-section__title">计算结果</view>  
        <fui-textarea placeholder="计算结果" v-model="perimeter" disabled></fui-textarea>  

        <view class="fui-btn__box">  
            <fui-button text="开始计算" bold @click="submit"></fui-button>  
        </view>  

    </view>  
</view>

</template> <script> export default { data() { return { a: '', b: '', c: '', perimeter: '' } }, methods: { submit() { console.log(this); // this.perimeter = + '11' + 1; // web：12 wx：12 this.perimeter = this.a + this.b + this.c; this.perimeter = "三角形周长为 " + this.perimeter; } } } </script> <style> page { font-weight: normal; } .fui-section__title { margin-left: 32rpx; } .fui-left__icon { padding-right: 24rpx; } .fui-btn__box { width: 100%; padding: 64rpx 32rpx; box-sizing: border-box; } </style>

h691938207 7楼•15 天前

测试后，没有发现在问题。都是number类型，加法正常。我的hbuilderx 版本3.4.7。你把fui- 一系列组件去掉试试。

yuanlaile 8楼•15 天前

回复呆狗的一生: 确实是fui-组件的问题，非常感谢。

vueper 9楼•15 天前

回复 1***@qq.com: fui 系列组件是什么？没有用过。有什么特殊功能吗

ionicwang 10楼•15 天前

<template> <view class="wrap"> <view class="page__hd"> <view class="page__title">三角形周长</view> <view class="page__desc">三角形周长 C = a + b + c，其中a、b、c为三角形的边长</view> </view> <view class="page__bd">

        <view class="section__title">输入三角形的边长</view>    
        <input textRight required label="三角形边长 a" borderTop placeholder="请输入边长 / m" clearable    
            v-model.number="a">    
        </input>    
        <input textRight required label="三角形边长 b" placeholder="请输入边长 / m" clearable v-model.number="b">    
        </input>    
        <input textRight required label="三角形边长 c" :bottomLeft="0" placeholder="请输入边长 / m" clearable    
            v-model.number="c">    
        </input>    

        <view class="section__title">计算结果</view>    
        <textarea placeholder="计算结果" v-model="perimeter" disabled></textarea>    

        <view class="btn__box">    
            <button  bold @click="submit">开始计算</button>    
        </view>    

    </view>    
</view>

</template> <script> export default { data() { return { a: '', b: '', c: '', perimeter: '' } }, methods: { submit() { console.log(this); // this.perimeter = + '11' + 1; // web：12 wx：12 this.perimeter = this.a + this.b + this.c; this.perimeter = "三角形周长为 " + this.perimeter; } } } </script> <style> page { font-weight: normal; } .section__title { margin-left: 32rpx; } .left__icon { padding-right: 24rpx; } .btn__box { width: 100%; padding: 64rpx 32rpx; box-sizing: border-box; } </style>

htzhanglong 11楼•15 天前

在 uni-app 中，v-model 的 number 修饰符在微信小程序中可能不起作用，这是因为微信小程序的底层实现与 Web 端有所不同。微信小程序的 input 组件默认会将输入值作为字符串处理，即使你使用了 number 修饰符，它也不会自动将输入值转换为数字类型。

解决方案

手动转换类型：你可以在 input 事件中手动将输入值转换为数字类型。

<template>
  <input type="text" :value="numberValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    };
  },
  methods: {
    handleInput(event) {
      this.numberValue = Number(event.detail.value);
    }
  }
};
</script>

使用 v-model 和 watch：你可以继续使用 v-model，然后通过 watch 监听数据变化并手动转换类型。

<template>
  <input type="text" v-model="inputValue" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      numberValue: 0
    };
  },
  watch: {
    inputValue(newVal) {
      this.numberValue = Number(newVal);
    }
  }
};
</script>

使用 uni-app 的 input 组件：如果你使用的是 uni-app 的 input 组件，可以尝试使用 @input 事件来手动处理输入值。

<template>
  <uni-input type="text" :value="numberValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      numberValue: 0
    };
  },
  methods: {
    handleInput(event) {
      this.numberValue = Number(event.detail.value);
    }
  }
};
</script>