Question

我有一个要用户修改的值，当前我有：

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

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

所以我希望将显示的值（度）与内部值（弧度）乘以2来绑定。我如何在vuejs中实现呢？

在C＃中，我想做这样的事：

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

可以用javascript做类似的事情，以便它与v模型绑定正确工作吗？

Answer 1

尝试按VueJS documentation中所述，通过get / set使用Computed属性。

类似这样的东西：

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

Answer 2

@ Script47链接时，此答案对我有帮助：How create a v-model modifier to a VueJS Component?

vue模块中的功能：

        degToRad(d){
            return d*Math.PI/180;
        },
        radToDeg(r){
            return r/Math.PI*180;
        }

在html中，您可以将v模型分解为：value和@input，其作用类似于输入的getter和setter：

      <div v-for="item in items">
        <input class="val" type="number" @input="item.rotation = degToRad($event.target.value)" :value="radToDeg(item.rotation)" step="any"/>
      </div>

将输入与因子绑定（V模型）

2 个答案: