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 used
value
The property andinput
Events; - Checkbox and radio use
checked
The property andchange
Events; - The select field will
value
As prop and willchange
As 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
input
Event, keyboard, mouse, any input device inputchange
Event 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: