Difference between v-model and v-bind on Vue.js?

by

From here –
Remember:

<input v-model="something">

is essentially the same as:

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

or (shorthand syntax):

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

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. The js value must be present in your data, or in an inject.

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.

More Related Contents:

  1. How to deploy Laravel/Lumen Framework to the production server [closed]
  2. how to make a maximum 1MB upload image?
  3. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  4. Vue Router return 404 when revisit to the url
  5. How to pass a value from Vue data to href?
  6. How to make a dynamic import in Nuxt?
  7. Vue: shared data between different pages
  8. this.$auth.loggedIn returning false
  9. use axios globally in all my components vue
  10. What’s the real difference between target: ‘static’ and target: ‘server’ in Nuxt 2.14 universal mode?
  11. Vue.js – How to remove hashbang #! from url?
  12. TypeError: this.getOptions is not a function
  13. Vue.js change {{ }} tags
  14. Mocking methods on a Vue instance during TDD
  15. How to install vuetify 2.0 beta to the new vue cli project?
  16. How to have list + details pages based on API fetched content
  17. Delete a Vue child component
  18. Is it possible to emit from mounted in Vuejs?
  19. Pass data from child to parent in Vuejs (is it so complicated?)
  20. Vue.js—Difference between v-model and v-bind
  21. Passing event and argument to v-on in Vue.js
  22. What is nextTick and what does it do in Vue.js?
  23. “export ‘default’ (imported as ‘Vue’) was not found in ‘vue’
  24. vuetify icon not showing
  25. How to access Vuex module getters and mutations?
  26. Can we make vue.js application without .vue extension component and webpack?
  27. How can I share data between non parent-child components in Vue
  28. Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
  29. Passing props to Vue.js components instantiated by Vue-router
  30. Vuejs: Event on route change

Leave a Comment