vue实现input输入框保留两位小数

实现input输入框保留两位小数

对以下代码input输入框的值进行四舍五入保留两位小数。

代码：

<el-form :model="formData">
    <el-input   v-model="formData.turnMoney" 
                placeholder="请输入内容"
                type="number"></el-input>
    <el-input   v-model="formData.pinkMoney" 
                placeholder="请输入内容"
                type="number"></el-input>
    <el-input   v-model="formData.redMoney" 
                placeholder="请输入内容"
                type="number"></el-input>            
</el-form>
<script>
export default {
  data() {
    return {
      formData:{
        turnMoney:'',
        pinkMoney:'',
        redMoney:''
      }
    }
  }
}
</script>

参考案例：使用foreach遍历获取input输入框输入的值，并且使用toFixed方法进行四舍五入保留指定位数的小数。

下面介绍一下，写的过程中遇到的问题and解决：

问题①：

使用foreach遍历formData时，报错formData不是一个数组，这才发现formData是一个json对象。

vue中foreach语句的使用方法是什么？

参考：vue中foreach语句的使用方法是什么-Vue.js-PHP中文网

forEach() 是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是for循环的升级版，该语句需要有一个回调函数作为参数。

回调函数的形参依次为：1、value：遍历数组的内容；2、index：对应数组的索引，3、array：数组自身。

在Vue项目，标签里的循环使用v-for，方法里面的循环使用forEach。

1、forEach() 使用原理forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。需要注意的是: forEach() 方法对于空数组是不会执行回调函数的。

forEach：即Array.prototype.forEach，只有数组才有的方法，相当于for循环遍历数组。用法：arr.forEach(function(item,index,array){...}),其中回调函数有3个参数，item为当前遍历到的元素，index为当前遍历到的元素下标，array为数组本身。forEach方法不会跳过null和undefined元素。比如数组[1，undefine，null，，2]中的四个元素都将被遍历到，注意与map的区别。

2、forEach() 语法array.forEach(function(currentValue, index, array), thisValue)

例子：array.forEach(function(item,index,array){ ... })forEach() 其他相关内容forEach()的continue和break：forEach() 自身不支持continue和break语句的，但是可以通过some和every来实现。

forEach()与map的区别: forEach()没有返回值，性质上等同于for循环，对每一项都执行function函数。即map是返回一个新数组，原数组不变，而forEach是改变原数组。forEach()与for循环的对比：for循环步骤多比较复杂，forEach循环比较简单好用，不易出错。

forEach()例子：

实例一：

let array = [1, 2, 3, 4, 5, 6, 7];
array.forEach(function(item, index) {console.log(item);});
//输出数组的每一个元素

实例二：

var array=[1, 2, 3, 4, 5];
array.forEach(function(item, index, array){array[index]=4 * item;});
console.log(array); 
//输出结果：修改了原数组元素，为每个元素都乘以4

JSON对象

参考：JSON 对象 | 菜鸟教程

实例：{ "name":"runoob", "alexa":10000, "site":null }

JSON 对象使用在大括号 {...} 中书写。

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号 : 分割。

每个 key/value 对使用逗号 , 分割。

---

当时，急着写都没仔细往下看，现在仔细看了json对象介绍，下面就有使用for-in循环对象遍历。（当时就想着使用foreach，还将json对象转换成数组，然后用foreach遍历，结果还有报错。反思）如下：

访问对象值：

你可以使用点号 . 来访问对象的值：

var myObj, x;

myObj = { "name":"runoob", "alexa":10000, "site":null };

x = myObj.name;

你也可以使用中括号（[]）来访问对象的值：

var myObj, x;

myObj = { "name":"runoob", "alexa":10000, "site":null };

x = myObj["name"];

---

循环对象：

你可以使用 for-in 来循环对象的属性：

var myObj = { "name":"runoob", "alexa":10000, "site":null }; 
​
for (x in myObj) {    
​
    document.getElementById("demo").innerHTML += x + "<br>"; }

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：

var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {    
    document.getElementById("demo").innerHTML += myObj[x] + "<br>"; }

---

嵌套 JSON 对象

JSON 对象中可以包含另外一个 JSON 对象：

myObj = {    
    "name":"runoob",    
    "alexa":10000,    
    "sites": {        
        "site1":"www.runoob.com",        
        "site2":"m.runoob.com",        
        "site3":"c.runoob.com"    } }

你可以使用点号 . 或者中括号 [...] 来访问嵌套的 JSON 对象。

x = myObj.sites.site1;

// 或者 x = myObj.sites["site1"];

---

修改值

你可以使用点号 . 来修改 JSON 对象的值：

myObj.sites.site1 = "www.google.com";

你可以使用中括号 [...] 来修改 JSON 对象的值：

myObj.sites["site1"] = "www.google.com";

---

删除对象属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

delete myObj.sites.site1;

你可以使用中括号 [...] 来删除 JSON 对象的属性：

delete myObj.sites["site1"]

---

了解了以上知识，下面就

使用for-in遍历formData

onInput(){
    let data=this.formData;
    for(val i in data){
        console.log(i+"="+data[i]);
    }
}//这里使用中括号[]来访问json的值

问题②：

上面已经成功取到了每一个input输入框输入的值，下面就使用tofixed来四舍五入保留小数。

tofixed方法

定义和用法:

toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

语法：

NumberObject.toFixed(num)

参数	描述
num	必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。

返回值：

返回 NumberObject 的字符串表示，不采用指数计数法，小数点后有固定的 num 位数字。如果必要，该数字会被舍入，也可以用 0 补足，以便它达到指定的长度。如果 num 大于 le+21，则该方法只调用 NumberObject.toString()，返回采用指数计数法表示的字符串。

抛出：

当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。

当调用该方法的对象不是 Number 时抛出 TypeError 异常。

实例

在本例中，我们将把数字舍入为仅有一位小数的数字：

Show the number 13.37 with one decimal:
<script type="text/javascript">
var num = new Number(13.37);
document.write (num.toFixed(1))
</script>

输出：

Show the number 13.37 with one decimal:
13.4

使用tofixed

onInput(){
    let data=this.formData;
    for(val i in data){
        data[i]=data[i].toFixed(2);
        console.log(i+"="+data[i]);
    }
}//这里使用中括号[]来访问json的值

此时，报错。解释：当调用该方法的对象不是 Number 时抛出 TypeError 异常。

定义的formData中的value是字符串类型的，所以需要转成number。这里使用parseFlost方法，因为input中是浮点数，若是整数用parseInt

parseFloat方法

parseFloat()函数 可解析一个字符串，并返回一个浮点数。

onInput(){
    let data=this.formData;
    for(val i in data){
        data[i]=parseFloat(data[i]).toFixed(2);
        console.log(i+"="+data[i]);
    }
}

问题③：

写完以上代码，确实可以实现保留两位小数。但是只要有一个输入框输入，此时所有使用oninput此方法的输入框都会触发，即使其他输入框没有输入任何数字。

所以，这时候我们就要判断一下是哪个输入框输入了数字并且需要保留两位小数。

判断哪个输入框需要保留小数

onInput(){
    let data=this.formData;
    for(val i in data){
        for(data[i]!==''){
            data[i]=parseFloat(data[i]).toFixed(2);
            console.log(i+"="+data[i]);
        }//未输入值就是空的
    }
}

问题④：

我这里写的是@input=“onInput”只要输入框改变就会触发此方法，导致只能输入一位数就触发保留小数了，这样是不对的，应该让用户输入所有数字，然后点击保存，在保存的那一刻，触发保留小数的事件。

<el-input   v-model="formData.turnMoney" 
            placeholder="请输入内容"
            type="number"
            @input="onInput"
            ></el-input>

正确写法：

写在保存按钮的点击事件的最前面

//保存按钮的点击事件
serve(){
    let data=this.formData;
    for(val i in data){
        if(data[i]!==''){
            data[i]=parseFloat(data[i]).toFixed(2);
            console.log(i+"="+data[i]);
        }
    }//实现点击保存，input输入框内容保留两位小数
}

问题⑤

data里面的对象并不一定都要求保留两位小数。

其中有一项pinkMoney要求是整数，所以我就又加了一个if

serve(){
    let data=this.formData;
    for(val i in data){
        if(data[i]!==''){
            if(data[i]!==data.pinkMoney){
                data[i]=parseFloat(data[i]).toFixed(2);
                console.log(i+"="+data[i]);
            }
        }
    }
        }

逻辑真的很重要！！！！

其实就三行代码，但是用到了很多知识点，基础知识一定要学扎实。