Vue: V-model syntax sugar

““Difficulty: 🌟”“

““Taste: Chocolate”“

Make a note of how often you use the V-Model without knowing how it works

  • Chestnut: When using v-Model two-way data binding events
<input v-model = 'something'>
Copy the code
  • How it works: Just a grammar candy
<input v-bind:value="something" v-on:input="something=$event.target.value">
Copy the code
  • So when used in components, it is equivalent to the following shorthand:
<custom v-bind:value="something" v-on:input="something = $event.target.value"></custom>
Copy the code

For the component V-Model to work it must:

  • “Receive a value attribute“
  • “An input event is emitted when value changes“

Use v – model

<template>
  <input v-model="value" />
</template>

<script>
export default {  conponents:{input}  data() { return {  value: "I'm the value in the text box."  }  } } </script> Copy the code

Use v-bind to get the value V-on binding input triggers the event

<template>
  <input :value="value" @input="handleChange" />
</template>
<script>
  export default {
 components: { input },  data () {  return {  value: "VaLue in my text box"  }  },  methods: {  handleChange (val) {  this.value = val;  }  }  } </script>  Copy the code

conclusion

V-model is the syntactic sugar of V-bind data binding and V-ON processing function binding

“Limitations on the use of the V-Model“

// Two-way data binding is mainly implemented on form controls and components<select>
<textarea>
The components componentsCopy the code

This article is formatted using MDNICE