Vuejs возвращает данные при наборе пользователя

Question

У меня есть числовое поле ввода, и я хотел бы вернуть некоторые результаты, пока пользователь заполняет поле ввода.

код

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

Логика

1. Пользователи начинают вводить числа в поле выше
2. Получит это число -% 10 под ним
3. Возвращенное число будет изменяться последовательно, когда пользователь изменяет пример ввода

:

PS: Причина, по которой я не предоставил код watch, mounted, etc., заключается в том, что у меня нет кода дляэтот вопрос.

есть идеи?

Answer 1

Это очень простой фрагмент. Надеюсь, это будет полезно.

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 2

Вы можете использовать вычисляемое свойство для этого:

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>

Вот ресурс по вычисляемым свойствам.

Надеюсь, это поможет!

Answer 3

Вы можете легко вставить значение прямо в страницу, используя интерполяцию:

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