VueJS：如何在没有输入的情况下设置输入模型答案

【问题标题】：VueJS: How to set model of an input without having it to be on the inputVueJS：如何在没有输入的情况下设置输入模型
【发布时间】：2018-10-31 05:11:16
【问题描述】：

我希望输入在视图侧的元素上没有值，但在下面我希望它有一个默认值，这里有一些 sn-p 来解释我的观点：

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

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

【问题讨论】：

标签： javascript vuejs2

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

您好，谢谢您的回答，但我的问题意味着我有 this.amount = 0 但没有在数字框本身上呈现 0，而是显示为一个空的数字框。这可能吗？
ughhh.. 我的意思是，在“用户视角”上，当他查看输入时它是空的.. 但在下面，它的值为 0。希望这更清楚