我有一个希望用户修改的值,目前我有:
<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)正常工作吗?
最佳答案
尝试将计算属性与 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
关于javascript - 将输入与因子绑定(bind)(v-模型),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57954666/