Detailed explanation of vue form use cases

This time I will bring you a detailed explanation of the use case of vue form. What are theprecautionswhen using vue form. The following is a practical case, let's take a look.

1. Basic Usage

You can use the v-model command to create a bidirectional form on theandelements.Data binding.

But v-model is essentially just syntactic sugar. It is responsible for listening to user input events to update data and perform some special processing for some extreme scenarios.

v-model will ignore the initial values of the value, checked, and selected attributes of all form elements and always use the data of the Vue instance as the data source. You should declare the initial value in the component's data option viaJavaScript.

A set of codes, after reading the basic usage of text, textarea, radio, checkbox, and select:

 {{message}}
 {{message1}}
  单选按钮
  男 女
  跑步 爬山 滑雪
    请选择 html javascript css     {{option.text}}   
 var app7 = new Vue({ el: '#app7', data:{ message: '单行文本', message1: '多行文本', picked: true, sex: 'boy', hobby: ['爬山','滑雪'], select: 'css', selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } });

2. Value binding

When radio buttons, check boxes and selection lists are used alone or in radio selection mode, the value bound by v-model is a static string or Boolean value, but in business, sometimes binding is required A dynamic data can be implemented using v-bind.

A set of codes, after reading the commonly used value bindings of radio, checkbox, and select in forms:

   单选按钮 
{{picked}}
 
{{value}}
   复选框 
{{toggle}}
 
{{value1}}
 
{{value2}}
   123  {{selected.number}} 
 var app8 = new Vue({ el: '#app8', data:{ picked: false, value: 'boy', toggle: false, value1: 'a', value2: 'b', selected: '' } });

3. Modifiers

Similar to event modifiers, v-model also has modifiers to control the timing of data synchronization.

A set of codes, after reading the commonly used modifiers lazy, number, and trim

   
{{message}}
   
{{typeof number}}
   
{{text}}
 
 var app9 = new Vue({ el: '#app9', data:{ message: '', number: '', text: '' } });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to correctly solve cross-domain problems in Vue projects

How to use vue-cli axios Request method and cross-domain processing

The above is the detailed content of Detailed explanation of vue form use cases. For more information, please follow other related articles on the PHP Chinese website!