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


209

Я изучаю Vue с помощью онлайн-курса, и инструктор дал мне упражнение для ввода текста со значением по умолчанию. Я закончил это, используя v-модель, но преподаватель выбрал v-bind: value, и я не понимаю почему.

Может кто-нибудь дать мне простое объяснение разницы между этими двумя и когда лучше использовать каждый?


8
v-modelиспользуется в основном для ввода и назначения ставок, поэтому используйте его, когда вы имеете дело с различными типами ввода. v-bindДиректива позволяет вам получить некоторое динамическое значение, набрав некоторое JS-выражение, которое в большинстве случаев зависит от данных из модели данных - так что думайте о v-bind как о директиве, которую вы должны использовать, когда хотите разобраться с некоторыми динамическими вещами.
Белмин Бедак

5
В некоторых случаях вы можете использовать каждый из них. Иногда нет, например: <div v-bind:class="{ active: isActive }"></div>- вы не можете связать атрибут html, используя модель, вы должны использовать v-bindдирективу. Для элементов формы вы захотите использовать v-modelдирективу - «она автоматически выбирает правильный способ обновления элемента на основе типа ввода».
Александр

1
@ Александр Фраза «привязать атрибут HTML» помогла мне лучше обдумать это. Было бы хорошо, если бы вы взвесили это с более полным ответом о том, что на самом деле происходит с этими двумя конструкциями.
Том Рассел

@ Александр Эсп в контексте компонента dataи props...
Том Рассел

Ответы:


430

От здесь - Запомнить:

<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, покрытые в доке .


33
«Используйте v-модель, когда можете. Используйте v-bind / v-on, когда вам нужно '. Отличное резюме! Большое спасибо!
尤川豪

Какая разница между v-modelа v-bind:xxx.sync?
Эль Мак,

2
@ElMac v-модель - это двусторонняя связь между компонентом Vue и моделью javascript. Источник (сторона привязки модели) объявляется в данных компонента Vue. Таким образом, Vue позволяет вам извлекать состояние из ваших компонентов, а затем изменять это состояние непосредственно из компонента. Это простой шаблон для управления состоянием, который является отличительной чертой Vue (сложно / скрыто / невозможно / не рекомендуется в Angular и React). v-bind: xxx.sync - это двусторонняя привязка между компонентом Vue и его родителем]. Государство остается в капсуле. Он «принадлежит» родителю. Это не обязательно лучше!
bbsimonbb

45

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

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

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


'если вы измените входное значение, связанные данные будут изменены, и наоборот. «- не могу понять часть« наоборот »даже из примера со скрипкой. ты можешь это объяснить?
Истак Ахмед

если вы измените входное значение через элемент, связанные данные будут изменены, а также, если вы измените связанные данные, например, через API Vue, значение вашего входного элемента изменится.
Мадмади

как изменить связанные данные через Vue API?
Истак Ахмед

В примере со скрипкой, скажем, у нас есть метод, который меняет источник данных следующим образомthis.data_source = 'Some new value'
Madmadi

на data_source, вы имеете в виду HTML впрыскивается в DOM из input, не так ли?
Истак Ахмед

3

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

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

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

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

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

«v-модель - это двухстороннее связывание данных»: каковы эти два способа?
Истак Ахмед

2
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/ 

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

 Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

Надеюсь, что это поможет вам с базовым пониманием


1

Есть случаи, когда вы не хотите использовать 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>

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.