Vue js Difference between v-model and v-bind

Question

I m learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value  I completed it using v-model but  the instructor chose v-bind value and I don t understand why   Can someone give me a simple explanation about the difference between these two and when it s better use each one

User · Answer

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   Hope this helps you with basic understanding

User · Answer

In simple words 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   check out this simple example  https   jsfiddle net gs0kphvc

User · Answer

There are cases where you don t want to use v-model  If you have two inputs  and each depend on each other  you might have circular referential issues  Common use cases is if you re building an accounting calculator   In these cases  it s not a good idea to use either watchers or computed properties   Instead  take your v-model and split it as above answer indicates   lt input     value  something      input  something    event target value   gt    In practice  if you are decoupling your logic this way  you ll probably be calling a method   This is what it would look like in a real world scenario    x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  x000D     lt input  value  extendedCost   input   onInputExtendedCost    gt  x000D     lt p gt     extendedCost    x000D   lt  div gt  x000D   x000D   lt script gt  x000D    var app   new Vue   x000D      el    app   x000D      data  function    x000D        return   x000D          extendedCost  0  x000D          x000D         x000D      methods    x000D         onInputExtendedCost  function  event    x000D          this extendedCost   parseInt  event target value   x000D             Go update other inputs here x000D        x000D      x000D        x000D   lt  script gt  x000D   x000D   x000D

User · Answer

v-model it is two way data binding  it is used to bind html input element when you change input value then bounded data will be change   v-model is used only for HTML input elements  ex   lt input type  text  v-model  name   gt     v-bind it is one way data binding means you can only bind data to input element but can t change bounded data changing input element  v-bind is used to bind html attribute ex    lt input type  text  v-bind class  abc  v-bind value    gt     lt a v-bind href  home abc   gt  click me  lt  a gt

User · Answer

From here -  Remember    lt input v-model  something  gt    is essentially the same as    lt input    v-bind value  something     v-on input  something    event target value   gt    or  shorthand syntax     lt input     value  something      input  something    event target value   gt    So v-model is a two-way binding for form inputs  It combines v-bind  which brings a js value into the markup  and v-on input to update the js value    Use v-model when you can  Use v-bind v-on when you must  -  I hope your answer was accepted   v-model works with all the basic HTML input types  text  textarea  number  radio  checkbox  select   You can use v-model with input type date if your model stores dates as ISO strings  yyyy-mm-dd   If you want to use date objects in your model  a good idea as soon as you re going to manipulate or format them   do this   v-model has some extra smarts that it s good to be aware of  If you re using an IME   lots of mobile keyboards  or Chinese Japanese Korean    v-model will not update until a word is complete  a space is entered or the user leaves the field   v-input will fire much more frequently    v-model also has modifiers  lazy   trim   number  covered in the doc

[javascript] Vue.js—Difference between v-model and v-bind

Examples related to javascript

Examples related to mvvm

Examples related to frameworks

Examples related to vue.js

Examples related to frontend