javascript - 将输入与因子绑定(bind)(v-模型)

Question

我有一个希望用户修改的值，目前我有:

<input type="number" v-model="value" step="any"/>

但内部值是弧度，而我希望用户看到并输入度值。

所以我希望显示的值(度)与带有乘法因子的内部值(弧度)进行双向绑定(bind)。我怎样才能在vuejs中实现这一点？

在 C# 中我想做这样的事情:

float internalValue;
float factor = 3.141/360;
float externalValue {get {return internalValue/factor} set {internalValue=value*factor}};

可以使用 javascript 完成类似的操作，以便它可以与 v-model 绑定(bind)正常工作吗？

Answer 1

尝试将计算属性与 get/set 结合使用，如 VueJS documentation 中所述。 .

像这样:

const factor = 3.141/360;

new Vue({
  el: "#app",
  data: {
    internalValue: '',
  },
  computed: {
    value: {
      get: function(){
        return this.internalValue/factor
      },
      set: function(val){
        let comp = val*factor
        this.internalValue = comp
        this.value = val
      }
    }
  }
})

#app {
  padding: 20px;
}


h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>input: </h2>
  <input type="number" v-model="value" step="any"/>
  <h3>
  ext. value: {{value}}
  </h3>
  <h3>
  int. value: {{internalValue}}
  </h3>
</div>

我已将其添加到 JSfiddle here