Vue.js-Разница между v-моделью и v-bind

Ответ 1

Отсюда - Помните:

<input v-model="something">

по сути то же самое, что и:

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

или (сокращенный синтаксис):

<input
   :value="something"
   @input="something = $event.target.value"
>

Таким образом, v-model является двусторонней связью для входных данных формы. Он объединяет v-bind, который вносит значение js в разметку, и v-on:input для обновления значения js.

Используйте v-model когда можете. Используйте v-bind/v-on когда это необходимо :-) Я надеюсь, что ваш ответ был принят.

v-model работает со всеми основными типами ввода HTML (текст, текстовое поле, число, радио, флажок, выберите). Вы можете использовать v-model с input type=date если ваша модель хранит даты в виде строк ISO (гггг-мм-дд). Если вы хотите использовать объекты даты в вашей модели (хорошая идея, как только вы собираетесь манипулировать или форматировать их), сделайте это.

v-model есть несколько дополнительных умов, о которых стоит знать. Если вы используете IME (много мобильных клавиатур, или китайская/японская/корейская), v-модель не будет обновляться, пока не будет заполнено слово (введен пробел или пользователь покидает поле). v-input будет срабатывать гораздо чаще.

v-model также имеет модификаторы .lazy, .trim, .number, .number в документе.

Ответ 2

Проще говоря, v-model для двухстороннего связывания означает: если вы измените входное значение, связанные данные будут изменены, и наоборот.

но v-bind:value называется односторонним связыванием, что означает: вы можете изменить входное значение, изменив связанные данные, но вы не можете изменить связанные данные, изменив входное значение через элемент.

посмотрите на этот простой пример: https://jsfiddle.net/gs0kphvc/

Ответ 3

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

v-модель используется только для элементов ввода HTML

ex: <input type="text" v-model="name" > 

v-связывание
это односторонняя привязка данных, означает, что вы можете только привязать данные к элементу ввода, но не можете изменить ограниченный элемент данных, изменяя элемент ввода. v-bind используется для привязки атрибута html
например:
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>

Ответ 4

Есть случаи, когда вы не хотите использовать v-model. Если у вас есть два входа, и каждый зависит друг от друга, у вас могут возникнуть циклические проблемы со ссылками. Обычные случаи использования, если вы строите бухгалтерский калькулятор.

В этих случаях не рекомендуется использовать наблюдатели или вычисляемые свойства.

Вместо этого возьмите свою v-model и разделите ее, как указано выше.

<input
   :value="something"
   @input="something = $event.target.value"
>

На практике, если вы разделяете свою логику таким образом, вы, вероятно, будете вызывать метод.

Вот как это будет выглядеть в сценарии реального мира:

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

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>