Instructions for getting started with vue forms

This time I will bring you the instructions for getting started with the vue form. What are the precautions for getting started with the 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 the and elements. <a href="http://www.php.cn/code/7876.html" target="_blank">Data binding</a>.

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

 <p>
  <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->
  <input>
  <label>单选按钮</label>
  </p><p>{{picked}}</p>
  <p>{{value}}</p>
  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->
  <input>
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>
  <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->
  <select>
   <option>123</option>
  </select>
  {{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 used to control the timing of data synchronization.

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

<p>
  <!-- .lazy:
  在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
  使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->
  <input>
  </p><p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->
  <input>
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input>
  <p>{{text}}</p>
 
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 view and modify the document date and document size

vue-infinite-loading2.0 use illustrate

The above is the detailed content of Instructions for getting started with vue forms. For more information, please follow other related articles on the PHP Chinese website!