VueJS：如何设置输入模型而不将其放在输入中

Question

我希望输入在视图侧的元素上没有任何值，但在下面我希望其具有默认值，下面是一些片段来说明我的观点：

          <input
            class="form-control"
            v-model="amount"
            type="number"
            step=".01"
            min="0"
            required>
          </input>

我想让数量默认为0，但不要在输入上呈现0，这在vuejs中可行吗？ 如果input[type="number"] = '' ，则该属性的值为0而不是''。

Answer 1

您可以将计算属性与getter和setter一起使用。 如果值为零，则getter可以返回一个空字符串。

 new Vue({ el: 'main', data: { amount: 0 }, computed: { formattedAmount: { get () { return this.amount || '' }, set (value) { this.amount = parseFloat(value) || 0 } } } })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script> <main> <input class="form-control" v-model="formattedAmount" type="number" step=".01" min="0" placeholder="Amount" required/> <pre>amount = {{ amount }}</pre> </main>

Answer 2

您可以绑定模型值

 var myObject = new Vue({ el: '#app', data: { amount: 0 } })

 <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input class="form-control" v-model="amount" type="number" step=".01" min="0" required> </input> </div> </body> </html>

VueJS：如何设置输入模型而不将其放在输入中

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-10-31 05:29:01

解决方案2
0 2018-10-31 05:18:33

VueJS：如何设置输入模型而不将其放在输入中

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-10-31 05:29:01

解决方案2 0 2018-10-31 05:18:33

解决方案1
1 已采纳 2018-10-31 05:29:01

解决方案2
0 2018-10-31 05:18:33