javascript - VueJS v-model 值到另一个输入

Question

我有两个输入，第一个:

<input v-model="from_amount" id="from_amount" type="text" class="form-control" name="from_amount">

第二个:

<input id="from_amount" type="text" class="form-control" name="to_amount" value="@{{ from_amount }}">

如果我在 from_amount 中输入数字，它应该在 to_amount 中输出

这是我的 VueJS 代码:

var request = new Vue({
    el: '#request-creator',
        data: {
            from_amount: '',
            to_amount: ''
        },
        computed: {
            calculate: function() {
                return (this.from_amount * 750) / 0.00024
            }
        }
})

但是好像用 Vue 做是不可能的？

Answer 1

您需要使用 v-bind , 将计算属性绑定(bind)到输入字段，如下所示:

<input id="from_amount" type="text" class="form-control" name="to_amount" v-bind:value="calculatedFromAmount">

或者简而言之，你也可以这样写

 ... :value="calculatedFromAmount">

参见工作 fiddle :http://jsfiddle.net/bvr9754h/

您必须在适当的组件中定义计算属性，如下所示:

    computed: {
        calculatedFromAmount: function() {
            return (this.from_amount * 750) / 0.00024
        }
    }