Vue's v-model usage example

The Vue framework is no longer a two-way binding of MVVM (Mode-View-View-Model). As early as the Vue 1.0 era, Vue was indeed a two-way binding of MVVM when it was first born. Since Vue 2.0, Vue has no longer been two-way binding, but has been one-way binding MV (Model-View) like React. However, the two-way binding interface is still retained in Vue, and v-model is it.

1. Basic usage

<template>
 <div >
  <input v-model="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}

Modify the value of x in JS, and the input input box will also change accordingly. Similarly, if you manually enter the value in the input input box on the page, the value of the variable x will also change accordingly. Changes in variables in an object will affect the change of the input of the view, and changes in input in the view will affect the change of the x value of the variable in the object. This is two-way binding (Model-View-View-Model).

2. v-model

In essence, the above code using v-model is equivalent to the following code:

<template>
 <div >
  <input :value="x" @input="x = $">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

What v-model helps us do is to set a dynamic binding for the value of input, and then modify the variable value of the dynamically bound value in real time after the input event in the input box is triggered. Therefore, v-model is essentially syntactic sugar in the above-mentioned way.

$event is the event event object in the native DOM event.

3. V-model modifier

All modifiers play an auxiliary role, and in fact, you can judge the conditions yourself in the function. .lazyv-model listens to the input event in the input box by default, and the input event of the native DOM is to record the real-time input change value. However, sometimes we don’t need to record the results in real time, we just need to record the final input result value.

There is also a change event in the native DOM event of input, which is executed when the input box loses focus or when the Enter key is pressed. In v-model, switch to this listening mode as the .lazy modifier.

<template>
 <div >
  <input ="x">
  {{x}}
 </div>
</template>Equivalent to：<template>
 <div >
  <input :value="x" @change="x = $">
  {{x}}
 </div>
</template>

The .modifier is to automatically use the parseFloat() function to turn it into a number when the input content is changed. The initial value of the variable must be a number when using this modifier.

<template>
 <div >
  <input ="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 0
  }
 }
}
</script>

• .trim

The .trim modifier automatically ignores and removes the spaces before and after when variable assignment is changed after variables are assigned. Record the input string content more accurately.

<template>
 <div >
  <input ="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

4. Customize the v-modelv-model of the input box

The basic usage of the simplified input box elements only applies to native input box elements. For input boxes encapsulated by the user, you can use v-model in the following way. When used on components, the essence of v-model is as follows:

<custom-input v-model="x"></custom-input>

Equivalent to：

<custom-input :value="x" @input="x = $event"></custom-input>

Therefore, the writing method in the custom form component is as follows:

<template>
  <div class="wrapper">
    <input :value="value" @input="$emit('input', $)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  }
}
</script>

<style scoped>
  .wrapper{
    border: 2px solid blue;
    display: inline-block;
  }
  .wrapper input{
    color: red;
  }
</style>
<template>
 <div >
  <MyInput v-model="x"/>
  {{x}}
 </div>
</template>

<script>
import MyInput from './components/MyInput'
export default {
 data(){
  return {
   x: 0
  }
 },
 components:{
  MyInput
 }
}
</script>

Supplement: If you want to use v-model in the native input box in the custom component, you can use the calculation attribute assignment method = according to the essence of the component v-model.

The above is the detailed content of Vue's v-model usage example. For more information about vue v-model, please follow my other related articles!