微信小程序Input如何控制小数位数

 时间:2026-04-21 17:51:54

1、打开微信小程序开发工具

新建小程序项目

微信小程序Input如何控制小数位数

2、输入程序位置和名称后,选择确定

微信小程序Input如何控制小数位数

3、这里会创建一个默认的小程序框架

微信小程序Input如何控制小数位数

4、我们找到 pages-》index-》index.wxml 文件

微信小程序Input如何控制小数位数

5、在右侧打开的文件中我们先创建一个输入框

设置type=number 只能输入数字

  <input type='number' >文本框</input>

微信小程序Input如何控制小数位数

6、设定完成后,保存,在左侧的画面中,我们找不到这个刚创建的输入框

我们来给输入框添加一个样式,让他更显眼一些

  <input type='number' style='background-color:green' >文本框</input>

微信小程序Input如何控制小数位数

微信小程序Input如何控制小数位数

7、我们给输入框添加 value属性

并设置一个变量用来显示数值

  <input type='number' style='background-color:green'  value='{{inputvalues}}'>文本框</input>

微信小程序Input如何控制小数位数

8、在对应的index.js文件中,添加如下的代码

微信小程序Input如何控制小数位数

9、在回到index.wxml文件中,给输入框添加事件

  <input type='number' style='background-color:green' bindinput='inputs' value='{{inputvalues}}'>文本框</input>

微信小程序Input如何控制小数位数

10、在index.js文件中,实现inputs 事件

, inputs: function (e) {

    var v1 = e.detail.value;

    var v2 = parseFloat(v1).toFixed(2)

    this.setData({

      inputvalues: v2

    })

微信小程序Input如何控制小数位数

11、完成后,保存文件

我们来测试一下

当我们在输入框中输入1时

数字会自动的变为1.00

这段代码可以实现输入数字自动转为2吗小数。还可在继续完善

微信小程序Input如何控制小数位数

微信小程序Input如何控制小数位数

  • 在家做葱爆鸡腿肉的做法
  • 婴儿脸上有红血丝是怎么回事?
  • 海南三亚旅游必备物品清单(实用)
  • 魔塔2013攻略
  • 人老腿先老的信号
  • 热门搜索
    耳朵里面很痒是怎么回事 做包子怎么发面视频 口疮怎么治 ps怎么添加字体 掉发严重怎么办 威尔斯瓷砖质量怎么样 图片怎么缩小 北京信息科技大学怎么样 金毛怎么养 我爱你用数字怎么表示