A list,

You can use the V-model directive to create two-way data binding on forms , , and < SELECT > elements. It automatically selects the correct method to update the element based on the control type. For all its magic, v-Models are essentially syntax sugar. It listens for user input events to update data and performs special processing in extreme cases.

Tip: The V-Model ignores the initial values of value, Checked, and selected attribute for all form elements. It will always have the data of the current active instance as the data source. You should declare the initial value in the data option of the component via JavaScript.

Internally, the V-Model uses different properties for different input elements and throws different events:

• Text and Textarea elements are usedvalueThe property andinputEvents;
• Checkbox and radio usecheckedThe property andchangeEvents;
• The select field willvalueAs prop and willchangeAs an event.

Tip: For languages that require input methods (Chinese, Japanese, Korean, etc.), you will find that the V-model is not updated during input method organization. If you also want to respond to these updates, use the input event listener and value binding instead of the V-Model.

Second, the sample

The following example shows the use of vUE on form elements

1. The input box

<script setup lang="ts"> import { ref } from 'vue'; const msg1 = ref(''); const msg2 = ref(''); </script> <template> <form action="" name="myForm"> <div class="demo-1"> <p>input: </p> <input type="text" V-model ="msg1" placeholder=" placeholder" {{msg1}} < / p > < / div > < hr / > < div class = "demo - 2" > < p > textarea: </p> <textarea type="text" V-model =" MSg2 "placeholder=" 提 供 信 息 "> {{ msg2 }}</p> </div> </form> </template>Copy the code

Demo effect:

2. Single box

<script setup lang="ts">
import { ref } from 'vue';
const checkVal = ref(' ');
</script>

<template>
  <form action="" name="myForm">
    <label>Gender:</label>

    <label>male</label>
    <input type="radio" value="Male" v-model="checkVal" />

    <label>female</label>
    <input type="radio" value="Female" v-model="checkVal" />

    <label>A secret</label>
    <input type="radio" value="Confidential" v-model="checkVal" />

    <p>Your options are: {{checkVal}}</p>
  </form>
</template>
Copy the code

Demo effect:

Note: In the single option box, you need to set the value attribute value for v-Model to obtain.

3. The boxes

<script setup lang="ts">
import { ref } from 'vue';
// The variable value type is array type
const heros = ref<Array<string>>([]);
</script>

<template>
  <form action="" name="myForm">
    <p>One of the following hero characters is a mage (multiple choices) :</p>

    <label>The various ge is bright</label>
    <input type="checkbox" value="Zhuge Liang" v-model="heros" />

    <label>luna</label>
    <input type="checkbox" value="Luna" v-model="heros" />

    <label>concubine</label>
    <input type="checkbox" value="Concubine" v-model="heros" />

    <label>The sable cicada</label>
    <input type="checkbox" value="The sable cicada" v-model="heros" />

    <label>Lyu3 bu4</label>
    <input type="checkbox" value="吕布" v-model="heros" />

    <p>Your options are: {{heros}}</p>
  </form>
</template>
Copy the code

Effect demonstration:

Tip: When checkboxes are applied, the value of the bound variable is an array type.

4. Select box

<script setup lang="ts">
import { ref } from 'vue';
const selected = ref(' ');
</script>

<template>
  <form action="" name="myForm">
    <select name="mySel" v-model="selected">
      <option value="">- Please select your city -</option>
      <option value="Chengdu">chengdu</option>
      <option value="Shanghai">Shanghai</option>
      <option value="Beijing">Beijing</option>
      <option value="Shenzhen">shenzhen</option>
      <option value="Hangzhou">hangzhou</option>
      <option value="Kunming">kunming</option>
    </select>
  </form>
  <p>Your city is: {{selected}}</p>
</template>
Copy the code

Effect demonstration:

3. Modifiers

1. .lazy

By default, v-Model synchronizes the value of the input box with the data after each input event is triggered. You can add the lazy modifier to synchronize after the change event:

<! Update "change" instead of "input" -->
<input v-model.lazy="msg" />
Copy the code

2. .number

If you want to automatically convert user input values to numeric types, you can add the number modifier to the V-Model:

<input v-model.number="age" type="text" />
Copy the code

This is often useful when the input type is text. If the input type is number, Vue can automatically convert the raw string to a number without adding the.number modifier to the V-model. If the value cannot be resolved by parseFloat(), the original value is returned.

3. .trim

If you want to automatically filter whitespace entered by the user, you can add the trim modifier to the V-model:

<input v-model.trim="msg" />
Copy the code