C=a+b+c
C=1+2+3 = 6
1***@qq.com
- 发布：2022-04-27 15:03
- 更新：2022-05-01 04:52
- 阅读：1779
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win 10 家庭中文版
HBuilderX类型： 正式
HBuilderX版本号： 3.3.13
第三方开发者工具版本号： 微信开发者工具1.05.2203070
基础库版本号： 1.05
项目创建方式： HBuilderX
操作步骤：
预期结果：
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”
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端，运行正常，可以正确实现数字的相加。
但是，在微信小程序端却是字符串的拼接。
实现的功能为，输入三角形的三条边，计算三角形的边长。
1***@qq.com (作者) - Seccess200
确实，如果使用Number函数可以实现数值字符串转为数值类型。但是，这从另一个方面说明uniapp在微信小程序端的v-model.number是失效的。
1***@qq.com (作者) - Seccess200
<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>
呆狗的一生 - 呆狗的一生
<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> 
1***@qq.com (作者)
依然不行。
2022-04-27 16:21