Javascript Vue，将输入绑定到选择选项

这个vue实例上的数据绑定仍然存在一些问题。我只想将每个选择选项与其中一个输入绑定。所以，如果选择了选项值110，那么我想显示输入dollarAmount，等等

我已经简化了vue函数，只在控制台中显示值，这很好，因此绑定可以正常工作，但我仍然不确定如何将输入（用于显示/隐藏）与select的值联系起来

这是笔：

美元金额
百分比
条款
$ 
% 
var changeDiscount=新的Vue({
el:“折扣变化”，
数据：{
关键字：“，
},
方法：{
changeDiscount:function（）{
console.log（this.key）
}
}
})

我不确定您在做什么，但您可以在输入中使用与“选择”中相同的v-model=“key”来显示数据。或者只显示：value=“key”以避免事件。

我不确定您在做什么，但您可以在输入中使用与“选择”中相同的v-model=“key”来显示数据。或者只显示：value=“key”以避免事件。

指向您的笔的链接不正确。您不需要添加

v-if=“key==“110”

等来显示相关输入吗？根据需要将其包装在

中，以便在需要单位前缀时保持

v-if

。抱歉，更新了实际有效的linkWow，我不知道v-if的用法。指向您笔的链接不正确。您不需要添加

v-if=“key==“110”

等来显示相关输入吗？根据需要将其包装在

中，以便在需要单位前缀时保持

v-if

。抱歉，更新了实际有效的linkWow，我甚至不知道v-if的用法

<div id="discountChange" class="uk-grid">
    <div class="uk-width-1-2">
        <select name="discountChange" @change="changeDiscount" v-model="key">
            <option value="110">Dollar Amount</option>
            <option value="100">Percentage</option>
            <option value="120">Terms</option>
        </select>
    </div>
    <div class="uk-width-1-2">
        $ <input class="md-input" type="text" name="dollarAmount">
        % <input class="md-input" type="text" name="percentage">
        <input class="md-input" type="text" name="terms">
    </div>
</div>

var changeDiscount = new Vue({
    el: "#discountChange",
    data: {
    key: "",
    },
    methods: {
        changeDiscount: function() {
            console.log(this.key)
        }
    }
})