Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to achieve form binding in Vue", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve form binding in Vue" article.

Basic usage

You can use the v-model directive to create bidirectional data bindings on forms and elements. It automatically selects the correct method to update the element based on the control type. Magical as it is, v-model is essentially nothing more than grammatical candy. It is responsible for listening to user input events to update data, and to do some special handling for some extreme scenarios.

Note:

1.v-model ignores the initial values of the value, checked, and selected properties of all form elements and always uses the data of the Vue instance as the data source. You should declare the initial value in the data option of the component through JavaScript.

two。 For languages that need to use input methods (such as Chinese, Japanese, Korean, etc.), you will find that v-model will not be updated in the input method combination process. If you want to handle this process, use the input event.

Input box

Case 1

Vue test example-input box

Input element: {{message}}

Textarea element: {{message2}}

New Vue ({el:'# app', data: {message: 'you can try it', message2: 'multiline statement\ r\ nwelcome here'}})

Check box

You can combine the calculation attributes to output the effect you want.

Case 2:

Vue test instance-check box

Single check box:

{{isClick}}

Multiple check boxes:

Baidu Google taobao

The selected value is: {{checkedNames}} new Vue ({el:'# app', data: {checked: false, checkedNames: []}, computed: {isClick:function () {return this.checked? "you clicked me": "you not cleck me"})

Radio button

The two-way data binding of radio buttons is demonstrated in the following example:

Case 3

Vue test example-radio button man

Women

Do you like: {{finalChose}} ({{picked}}) new Vue ({el:'# app', data: {picked: 'men'}, computed: {finalChose:function () {return this.picked==='men'? "man": "woman"}})

Select list

Two-way data binding for a drop-down list is demonstrated in the following example:

Case 4

Vue test example-select list Select a fruit banana apple selected fruit is: {{selected}} new Vue ({el:'# app', data: {selected:''}})

Dynamic options for rendering with v-for:

Vue test instance-select list {{option.text}} selected fruit is: {{selected}} new Vue ({el:'# app', data: {selected:', options: [{text:' choose a fruit', value:''}, {text:' banana', value:'banana'}, {text:' apple', value:'apple'}]},})

Modifier

.lazy

By default, v-model synchronizes the value of the input box with the data in the input event, but you can add a modifier lazy to synchronize in the change event:

.number

If you want to automatically change the user's input value to Number type (if the conversion result of the original value is NaN, the original value will be returned), you can add a modifier number to v-model to handle the input value:

This is usually useful because the value entered in HTML always returns a string type when type= "number".

.trim

If you want to automatically filter the leading and trailing spaces entered by the user, you can add the trim modifier to the v-model to filter the input:

The above is about the content of this article on "how to achieve form binding in Vue". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.