javascript - Vue getter/setter 行为在 * 和 / 为 100 时显示出意外的副作用

Question

我在 Vue 组件中有一个 getter 和 setter 函数，理想情况下，它允许用户以整数形式输入百分比，而我的应用程序将它们用作小数。这是获取器/设置器：

theValue:{
  //display whole numbers to the user
  get(){
    if(this.value < 1){
      return this.value * 100
    }
    return this.value
  },
  // set the decimal into the application
  set(update){
    this.$emit("input", val/100 );
  }
}

setter 按预期工作，但是，当 getter 再次收到值时，我会产生一些意想不到的后果。

当您输入输入 7 时，它会在输入上显示 7.0000000001。应用程序看到 0.07 就好了。当您在输入中键入 111 时，它会立即显示 1.11。

我可以在控制台中复制这个问题，什么是解决这个问题的实用方法。

警告：这些是可重用的组件，应用程序中的某些值最多可以有 7 个前导零作为有效值。使用toFixed()是行不通的，因为这些字段需要在这个组件中具有灵活性。理论上，我可以编写 2 个不同的组件，一个用于简单数字到百分之一，另一个用于过去。我想知道是否有任何想法可以优雅地做到这一点。

标签： javascriptvue.jsfloating-point