用户输入时，Vuejs返回数据

Question

我有数字输入字段，我想在用户填充输入字段时返回一些结果。

代码

<input type="number" name="bid" v-model="bid.bid" class="form-control">

逻辑

1. 用户开始在上方字段中输入数字
2. 将得到该数字-低于该数字％10
3. 当用户更改输入内容时，返回的号码将保持不变

示例：

  

PS：我没有共享任何watch, mounted, etc.代码的原因是   因为我没有这个问题的任何代码。

有什么主意吗？

Answer 1

您可以使用插值很容易地将值直接插入页面：

<div>You get: {{bid.bid * 0.9}}</div>

Answer 2

这是一个非常简单的代码段。希望它会有用。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  your bid: <input type="number" name="bid" v-model.number="bid" class="form-control">
  <br>
  your result: <span>{{bid*0.9}}</span>
</div>

Answer 3

您可以为此使用计算属性：

new Vue({
  el: "#app",
  data: {
    bid: 1000
  },
  computed: {
    reducedBid() {
      return this.bid * 0.9
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="number" name="bid" v-model="bid" class="form-control">
  <p>You get {{ reducedBid }}</p>
</div>

这里是计算属性的resource。

希望有帮助！