uni-app ios中，nvue输入框9.7渲染成9.699999999999999

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app ios中，nvue输入框9.7渲染成9.699999999999999

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win10
HBuilderX 正式
HBuilderX版本号 4.24
手机系统 iOS
手机版本号 iOS 17
手机厂商 苹果
手机机型 14pro Max
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
  <view>  
    <text>价格：{{price}}</text>  
    <input v-model="price" />  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        price: 9.7  
      }  
    },  
  };  
</script>

操作步骤：

<template>  
  <view>  
    <text>价格：{{price}}</text>  
    <input v-model="price" />  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        price: 9.7  
      }  
    },  
  };  
</script>

预期结果：

9.7

实际结果：

9.699999999999999

bug描述：

ios中 输入框值为9.7，v-model双向数据绑定之后显示为9.699999999999999


Harmonyos Next教程
2 回复


在uni-app中使用nvue开发iOS应用时，可能会遇到数字精度问题，如你提到的输入框中的数字9.7被渲染为9.699999999999999。这个问题通常是由于JavaScript的浮点数运算精度问题导致的。在nvue中，由于它基于Weex引擎，可能会更加敏感于这类数值精度问题。

为了解决这个问题，我们可以采取一些策略，比如使用整数存储和显示、或者对浮点数进行格式化处理。以下是一些示例代码，展示如何在nvue中处理这个问题：

1. 使用整数存储和显示

如果可能的话，可以将浮点数放大一定的倍数，存储为整数，然后在显示时再缩小回去。例如，存储价格时，可以将价格乘以100存储为整数，显示时再除以100。

<template>
  <div>
    <input type="number" v-model="inputValueInt" @input="updateValue" />
    <text>{{ formattedValue }}</text>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValueInt: 970, // 存储为整数
      scale: 100 // 放大倍数
    };
  },
  computed: {
    formattedValue() {
      return (this.inputValueInt / this.scale).toFixed(1); // 显示时缩小并格式化
    }
  },
  methods: {
    updateValue(e) {
      // 这里假设输入的是浮点数格式，需要转换为整数存储
      let value = parseFloat(e.target.value) * this.scale;
      this.inputValueInt = Math.round(value); // 对转换后的整数进行四舍五入
    }
  }
};
</script>

2. 使用toFixed格式化显示

如果不需要进行复杂的计算，只是希望在显示时保持一定的精度，可以直接使用toFixed方法格式化浮点数。

<template>
  <div>
    <input type="number" v-model="inputValue" />
    <text>{{ inputValue.toFixed(1) }}</text> <!-- 显示时格式化 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: 9.7
    };
  }
};
</script>

注意，toFixed方法返回的是一个字符串，如果需要进一步进行数值运算，可能还需要将其转换回数字。

以上两种方法可以帮助你在nvue中处理浮点数精度问题，确保数字在输入框和显示时保持正确的格式。根据具体需求选择合适的方法即可。

回到顶部