Form input binding

Basic usage

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.

prompt

The V-Model ignores the initial value, Checked, and selected attribute values of all form elements and always uses 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 use value property and input events; Checkbox and radio use checked Property and change events; The SELECT field takes value as prop and change as an event.

prompt

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 organization process. If you also want to respond to these updates, use the input event listener and value binding instead of using the V-Model.

Text (Text)

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

<script>
import HelloWorld from "./components/HelloWorld";

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

Multiline text

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

<script>
import HelloWorld from "./components/HelloWorld";

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

Interpolation in text areas does not work and should be v-model instead.

<! -- bad --> <textarea>{{ text }}</textarea> <! -- good --> <textarea v-model="text"></textarea>Copy the code

Check box (Checkbox)

A single check box, bound to a Boolean value:

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

Multiple check boxes bound to the same array:

<template> <div id="app"> {{x}} <label> <input type="checkbox" V-model ="x" value=" checkbox" /> <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> import HelloWorld from "./components/HelloWorld"; 12. export default { name: "App", data() { return { x: [], }; }, components: {}, }; </script>Copy the code

Radio buttons (Radio)

<template> <div id="app"> {{x}} <label> <input name="want "type="radio" V-model ="x" value=" x" /> <span> <span> </label> <label> <input name="want "type="radio" V-model ="x" value=" drink "/> <span> drink </span> </label> <label> <input Name ="want "type="radio" V-model ="x" value=" hot "/> <span> hot </span> </label> </div> </template> <script> import HelloWorld from "./components/HelloWorld"; 12. export default { name: "App", data() { return { x: '', }; }, components: {}, }; </script>Copy the code

The selection (Select)

Radio:

<template> <div id="app"> You want: {{ x }} <select v-model="x"> <option value="">Please select one</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: "smoke ", value: 1}, {text:" drink ", value: 2}, {text: "hot ", value: 2} 3 }, ], x: "", }; }, components: {}, }; </script>Copy the code

Pay attention to

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

Multi-select (bound to an array, rarely used) :

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br />
<span>Selected: {{ selected }}</span>
Copy the code

The form (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: "", }, x: "", }; }, methods: { onSubmit() { console.log(this.user); }, }, components: {}, }; </script>Copy the code

The modifier

.lazy

By default, v-Model synchronizes the value of the input box with the data after each input event (except for organizing text as described above). You can add the lazy modifier to synchronize after the change event _ :

<! <input v-model. Lazy =" MSG "/>Copy the code

Input event, input from keyboard, mouse, or any input device

The change event, which is emitted only when input loses focus

.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="number" />
Copy the code

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.

.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

`v-model`

The V-Model is essentially a syntax sugar. essentially Where @input is a listener for the input event :value=”test” puts data from the listener event into the input. It is important to note that the V-Model not only assigns values to the input but also retrieves the data in the input, and the data is retrieved in real time because the input box is listened for in the syntax sugar using @input.

Nature:

<input type="text" v-model="user.username" />

<input type="text" :value="user.username" @input="user.username=$event.target.value" />
Copy the code

conclusion

The interview asks how to implement the two-way binding of Vue, say the use of V-model.

Two-way binding
- v-modelYou can implement binding to a piece of data, and when that data changes, the UI changes.
- As the user changes the UI, so does the data.
in-depth
- v-modelisv-bind:valueandv-on:inputGrammar sugar.v-on:input="xxx=$event.target.value"

ant-design-vue

The introduction of ant – design – vue

Scaffolding installation tool

vue-cli

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
Copy the code

Create a project

Initialize using the command line. $ vue create antd-demoCopy the code

And configure the project.

Using the component

$ npm i --save ant-design-vue
$ yarn add ant-design-vue
Copy the code

A complete introduction

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});
Copy the code

The above code completes the introduction of Antd. Note that style files need to be introduced separately.

Enter the project and start.

$ cd antd-demo
$ npm run serve
Copy the code

The browser will then go to http://localhost:8080/ and see the Welcome to Your vue.js App interface.

Input – input box

Entering content through a mouse or keyboard is the most basic form field wrapper.
When to use
- When the user is required to enter the content of the form field.
- Provides combined input box, with search input box, can also be size selection.

<template>
  <div id="app">
    <a-input placeholder="Basic usage" />
  </div>
</template>
Copy the code

Form – Form

A form with data collection, validation, and submission capabilities that contains checkboxes, checkboxes, input boxes, drop-down selection boxes, and other elements.

The new a-form-Model can be used if v-Model two-way binding validation is required.

When to use
- Used to create an entity or gather information.
- The input data type needs to be verified.
Forms We provide the following three arrangements for forms:
- Horizontal arrangement: label and form controls are arranged horizontally. (the default)
- Vertical arrangement: Labels and form controls are arranged vertically up and down;
- Inline: Arrange form items in horizontal rows.
Form fields A form must contain form fields, which can be input controls, standard form fields, labels, drop-down menus, text fields, and so on.

Here we encapsulate the Form field < form.item />.

Note:

If you are usingForm.createProcessing forms with automatic data collection and validation capabilities is recommended using JSX.
If not usingVue.use(Form)Form components that you need to register on your own$formMount to the Vue prototype.Vue.prototype.$form = Form

//.vue <template> <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit"> <a-form-item label="Note"> <a-input v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]" /> </a-form-item> <a-form-item label="Gender"> <a-select v-decorator="[ 'gender', { rules: [{ required: true, message: 'Please select your gender!' }] }, ]" placeholder="Select a option and change input text above" @change="handleSelectChange" > <a-select-option value="male"> male </a-select-option> <a-select-option value="female"> female </a-select-option> </a-select> </a-form-item> <a-form-item :wrapper-col="{ span: 12, offset: 5 }"> <a-button type="primary" html-type="submit"> Submit </a-button> </a-form-item> </a-form> </template> <script> export default { data() { return { formLayout: 'horizontal', form: this.$form.createForm(this, { name: 'coordinated' }), }; }, methods: { handleSubmit(e) { e.preventDefault(); this.form.validateFields((err, values) => { if (! err) { console.log('Received values of form: ', values); }}); }, handleSelectChange(value) { console.log(value); this.form.setFieldsValue({ note: `Hi, ${value === 'male' ? 'man' : 'lady'}! `}); ,}}}; </script>Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue forms with V-Models

Form input binding

Basic usage

Text (Text)

Multiline text

Check box (Checkbox)

Radio buttons (Radio)

The selection (Select)

The form (form)

The modifier

.lazy

.number

.trim

`v-model`

conclusion

ant-design-vue

The introduction of ant – design – vue

Input – input box

Form – Form

Vue forms with V-Models

Form input binding

Basic usage

Text (Text)

Multiline text

Check box (Checkbox)

Radio buttons (Radio)

The selection (Select)

The form (form)

The modifier

.lazy

.number

.trim

v-model

conclusion

ant-design-vue

The introduction of ant – design – vue

Input – input box

Form – Form

Related Posts

How to implement the login interface of vue+ Canvas

React Scaffolding + ANTD-Mobile project configuration

Design a form designer yourself? Low code platform?

`v-model`