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 and 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:

<p id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--复选框使用数组类型的数据匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </p>

var app7 = new Vue({
 el: &#39;#app7&#39;,
 data:{
  message: &#39;单行文本&#39;,
  message1: &#39;多行文本&#39;,
  picked: true,
  sex: &#39;boy&#39;,
  hobby: [&#39;爬山&#39;,&#39;滑雪&#39;],
  select: &#39;css&#39;,
  selected: &#39;A&#39;,
  options: [
   { text: &#39;One&#39;, value: &#39;A&#39; },
   { text: &#39;Two&#39;, value: &#39;B&#39; },
   { text: &#39;Three&#39;, value: &#39;C&#39; }
  ]
 }
});

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:

 <p id="app8">
  <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>

  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>

  <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </p>

var app8 = new Vue({
 el: &#39;#app8&#39;,
 data:{
  picked: false,
  value: &#39;boy&#39;,
  toggle: false,
  value1: &#39;a&#39;,
  value2: &#39;b&#39;,
  selected: &#39;&#39;
 }
});

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

<p id="app9">
  <!-- .lazy:
  在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
  使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->
  <input type="text" v-model.lazy="message">
  <p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input type="text" v-model="text">
  <p>{{text}}</p>
 </p>
var app9 = new Vue({
 el: &#39;#app9&#39;,
 data:{
  message: &#39;&#39;,
  number: &#39;&#39;,
  text: &#39;&#39;
 }
});

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!