The official documentation

Basic usage

You can use the V-model directive to create two-way data binding on forms ,

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 for extreme scenarios.

The V-Model ignores the initial value, Checked, and selected attribute values of all form elements and always uses Vue instance data 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.

For languages that require input methods (such as Chinese, Japanese, Korean, etc.), you will find that the V-Model is not updated during the input method composition process. If you also want to handle this process, use input events.

The input text

<template>
  <div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    <p><button @click="message = 'river'">set message to river</button></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'hi'
    }
  },
  components: {}
};
</script>
Copy the code

Click button, change the memory, the page will automatically change. If you change the page, the memory will change automatically. This is two-way data binding

Textarea multi-line text

<template>
  <div id="app">
    <textarea v-model="message" placeholder="edit me" />
    <p>Message is: {{ message }}</p>
    <p><button @click="message = 'river'">set message to river</button></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'hi'
    }
  },
  components: {}
};
</script>
Copy the code

Interpolation in text areas () does not work, use the V-model instead.

The checkbox checkbox

Single check box

<template> <div id="app"> <label> <input type="checkbox" v-model="x"> <span>x:{{ x }}</span> </label> </div> </template>  <script> export default { name: 'App', data() { return { x: true } }, components: {} }; </script>Copy the code

A single check box, bound to a Boolean value

Multiple check boxes

<template> <div id="app"> {{x}}, <label> <input type="checkbox" V-model ="x" :value="1"> <span> </span> </label> <label> <input type="checkbox" V - model = "x" : value = "2" > < span > alcohol < / span > < / label > < label > < input type = "checkbox" v - model = "x" : value = "3" > < span > permed hair < / span > </label> </div> </template> <script> export default { name: 'App', data() { return { x: [] } }, components: {} }; </script>Copy the code

Multiple checkboxes bound to the same array

Radio radio button

<template> <div id="app"> You want: {{x}}, <label> <input name="want" type="radio" V-model ="x" :value="1"> <span> Type ="radio" v-model="x" :value="2"> <span> </span> </label> <label> <input name="want" type="radio" V-model ="x" :value="3"> <span> </span> </label> </div> </template> <script> export default {name: 'App', data() {return {x: [] } }, components: {} }; </script>Copy the code

Select the selection

When the radio

<template> <div id="app"> You want: {{x}} < hr / > < select v - model = "x" > < option value = "" > - < option > < option value =" 1 "> smoking < option > < option </option> <option value="3"> </option> </select> </div> </template> <script> export default {name: 'App', data() { return { x: [] } }, components: {} }; </script>Copy the code

If the initial value of the V-model expression fails to match any of the options, the

Dynamic options for rendering with V-for (multi-selection also works)

<template> <div id="app"> You want: {{x}} <hr/> <select v-model="x"> <option value=""> - </option> <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option> </select> </div> </template> <script> export default { name: 'App' data () {return {array: [{text: 'smoking' value: 1}, {value: text: 'drink', 2}, {text: 'permed hair, value: 3}], x: "" } }, components: {} }; </script>Copy the code

When multiple

Bind to an array

<template> <div id="app"> You want: {{x}} <hr/> <select multiple v-model="x"> <option value=""> - </option> <option v-for="item in array" :value="item.value" :key="item.value">{{item.text}}</option> </select> </div> </template> <script> export default { Name: 'App' data () {return {array: [{text: 'smoking' value: 1}, {value: text: 'drink', 2}, {text: 'permed hair, value: 3}], x: [] } }, components: {} }; </script>Copy the code

+ Shift select, + CTRL Select, press CTRL to cancel.

form

<template> <div id="app"> <form @submit. Prevent ="onSubmit"> <label> <span> </span> <input type="text" V -model="user.username" /> </label> <label> <span> password </span> <input type="password" V -model="user.password" /> </label> </button> </form> </div> </template> <script> export default {name: 'App', data() { return { user:{ username: '', password: '' } } }, methods:{ onSubmit(){ console.log(this.user); } }, components: {} }; </script>Copy the code

The modifier

.lazy

By default, v-Model synchronizes the value of the input field with the data each time the input event is triggered (except when the input method combines text as described above). You can add the lazy modifier to synchronize after the change event.

Review the input and change events

  • inputEvent, keyboard, mouse, any input device input
  • changeEvent that only fires when input loses focus
Lazy <input type="text" v-model="user.username" />Copy the code

Combined with the former

Combined with the following

.number

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

This is often useful because even when type=”number”, the value of the HTML input element always returns a string. If the value cannot be resolved by parseFloat(), the original value is returned.

<template> <input type="text" v-model.number="user.username" /> // input +.number modifier... </template> <script> export default { ... data() { ... User :{username: 0, // username: number password: ''}}... </script>Copy the code

Returns the result

.trim

You can add the trim modifier to the V-Model if you want to automatically filter the leading and trailing whitespace characters entered by the user.

<input type="text" v-model.trim="user.username" /> <input type="text" v-model.trim="user.username" />Copy the code

Before the change

After the change

Custom componentv-model

The official documentation

By default, a V-Model on a component makes use of a prop named Value and an event named Input.

Example:

App.vue <template> <div id=" App "> {{user}} <hr /> <span> username </span> <MyInput V-model ="user.username" /> <MyInput :value="user.username" @input="user.username = $event" /> // Use v-model </label> <label> <span> Password </span> <input type="password" V-model ="user.password" /> </label> <button </button> </form> </div> </template> <script> import MyInput from "@/MyInput"; export default { name: 'App', components: {MyInput}, data() { return { user:{ username: '', password: '' } } }, methods:{ onSubmit(){ console.log(this.user); }}}; </script>Copy the code
// create a new myinput. vue in the SRC directory. <template> <div class="red wrapper"> <input :value="value" @input="$emit('input',$event.target.value)" /> </div> </template> <script> export default { name: 'MyInput', props: { value: { type: String } } } </script> <style scoped> .red { background: red; } .wrapper { display: inline-block; } </style>Copy the code

The effect

Using ant – design – vue

Ant Design provides UI component libraries for Vue and React, respectively

github

The official documentation

Install antd

yarn add ant-design-vue
Copy the code

Modify main.js to introduce ANTD

// complete introduction
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);
Copy the code

There are also official ways to import components locally, which I won’t go into here

Using the component

Here’s an exercise in using components, using the form form as an example

Form Form – Login box

Be sure to include both XML and JS content, otherwise an error will be reported.

Modified code:

<template> <div id="app"> <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit" > <a-form-item> <a-input v-decorator="[ 'username', { rules: [ {require: true, message: }]},]" placeholder=" placeholder "> <a-icon slot="prefix" type="user" style="color: green; Rgba (0, 0, 25) "/ > < / a - input > < / a - form - item > < a form - item > < input v - a decorator =" [' password '{rules: [{required: True, message: 'Please fill in the password'}, {min: 8, message: 'Password at least 8 characters'}, {pattern: /[A-za-z]/, message: <a-icon slot="prefix" type="lock" style="color: RGB (50, 50, 50); Rgba (0,0,0,.25)" /> </a-input> </a-form-item> <a-button type="primary" HTML -type="submit" class="login-form-button"> Log  in </a-button> </a-form> </div> </template> <script> export default { name: 'App', beforeCreate() { this.form = this.$form.createForm(this, { name: 'normal_login' }); }, methods: { handleSubmit(e){ e.preventDefault(); this.form.validateFields((err, values) => { if (! err) { console.log('Received values of form: ', values); }}); }}}; </script>Copy the code

Effect: