Detailed explanation of vue form

You can use the v-model directive to create two-way data binding on form control elements. This article mainly introduces the detailed explanation of vue forms. Friends who need it can refer to it

1. Basic usage

You can use v-model The directive creates two-way data binding on the form's d5fd7aea971a85678ba271703566ebfd and 4750256ae76b6b9d804861d8f69e79d3 elements.

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 via JavaScript in the component's data option.

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 to 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: ''
 }
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of browser and server interaction in Ajax

Zero-based learning of AJAX and the AJAX framework

Zero basic learning AJAX to create automatic verification forms

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