v model Usage Example of Vue

The Vue framework is no longer an MVVM (Mode-View-View-Model) bidirectional binding. As early as Vue 1.0, Vue was indeed bidirectional binding of MVVM when it was born. Since Vue 2.0, Vue is no longer a bi-directional binding, but a unidirectional binding MV like React 1 (Model-View). However, the bi-directional binding interface remains in Vue, as is the case with v-model.

1. Basic usage

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

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

If you modify the value of x in JS, the input field of input will change accordingly. Similarly, manually entering a value in the input input box on the page changes the value of the variable x. Variable changes in the object affect input changes in the view, and input changes in the view affect x value changes in the object. This is bi-directional binding (Model-View-View-Model).

2. v-model

Essentially the above code using v-model is equivalent to the following code:

<template>
 <div id="app">
  <input :value="x" @input="x = $event.target.value">
  {{x}}
 </div>
</template>

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

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

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

3. Modifiers for v-model

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

There is also an 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 with the. lazy modifier.

<template>
 <div id="app">
  <input v-model.lazy="x">
  {{x}}
 </div>
</template> Equivalent to: <template>
 <div id="app">
  <input :value="x" @change="x = $event.target.value">
  {{x}}
 </div>
</template>

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

<template>
 <div id="app">
  <input v-model.number="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 changing the input content when assigning variables. Record the input string content more accurately.

<template>
 <div id="app">
  <input v-model.trim="x">
  {{x}}
 </div>
</template>

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

4. v-modelv-model for custom input boxes

The basic usage of v-model is only applicable to native input box elements. For user-encapsulated input boxes, you can use v-model as follows. 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, it is written in the custom form component as follows:

<template>
  <div class="wrapper">
    <input :value="value" @input="$emit('input', $event.target.value)">
  </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 id="app">
  <MyInput v-model="x"/>
  {{x}}
 </div>
</template>

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

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

The above is the v-model usage example of Vue. For more information about vue, v-model, please pay attention to other related articles on this site!