Vue.JS introductory tutorial for processing forms-JS Tutorial-php.cn

Vue.JS introductory tutorial for processing forms

高洛峰

Release： 2016-12-03 10:32:51

Original

1186 people have browsed it

The example in this article shares the relevant content of Vue.JS form processing for your reference. The specific content is as follows

Basic usage

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<form id="demo">
 <!-- text -->
 <p>
  <input type="text" v-model="msg">
  {{msg}}
 </p>
 <!-- checkbox -->
 <p>
  <input type="checkbox" v-model="checked">
  {{checked ? "yes" : "no"}}
 </p>
 <!-- radio buttons -->
 <p>
  <input type="radio" name="picked" value="one" v-model="picked">
  <input type="radio" name="picked" value="two" v-model="picked">
  {{picked}}
 </p>
 <!-- select -->
 <p>
  <select v-model="selected">
   <option>one</option>
   <option>two</option>
  </select>
  {{selected}}
 </p>
 <!-- multiple select -->
 <p>
  <select v-model="multiSelect" multiple>
   <option>one</option>
   <option>two</option>
   <option>three</option>
  </select>
  {{multiSelect}}
 </p>
 <p><pre class="brush:php;toolbar:false">data: {{$data | json 2}}

Copy after login

Lazy update
By default, v-model will be input synchronously after each input event data. You can add a lazy attribute to change it to synchronize only after the change event.

<!-- 在 "change" 而不是 "input" 事件触发后进行同步 -->
<input v-model="msg" lazy>

Copy after login

Convert to Number
If you want to automatically convert the user's input to a number, you can add a number attribute to the input where the v-model is located. No test was successful, I don’t know why

Binding expression
When using v-model in radio buttons and check boxes, the bound value Can be a boolean or a string:

<!-- toggle 是 true 或 false -->
<input type="checkbox" v-model="toggle">
 
<!-- 当单选框被选中时 pick 是 "red" -->
<input type="radio" v-model="pick" value="red">

Copy after login

There is a slight limitation here - sometimes we want to bind the underlying value to something else. You can implement it according to the following example:

1. Check box

<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b">
// 被选中时：
vm.toggle === vm.a
// 被取消选中时：
vm.toggle === vm.b

Copy after login

2. Radio button

<input type="radio" v-model="pick" exp="a">
// 被选中时：
vm.pick === vm.a

Copy after login

Dynamic select option
When you need to dynamically render list options for a

In your data, myOptions should be a path or expression pointing to an options array.
This optional array can contain a simple array:

options = ['a', 'b', 'c']

or it can contain objects in the format {text:'', value:''} . This object format allows you to set optional items so that the text display is different from the value behind it:

options = [
 { text: &#39;A&#39;, value: &#39;a&#39; },
 { text: &#39;B&#39;, value: &#39;b&#39; }
]

Copy after login

will be rendered as

<select>
 <option value="a">A</option>
 <option value="b">B</option>
</select>

Copy after login

1. Option group
In addition, the format of the objects in the array can also be is {label:'', options:[...]}. Such data will be rendered into an :

[
{ label: &#39;A&#39;, options: [&#39;a&#39;, &#39;b&#39;]},
{ label: &#39;B&#39;, options: [&#39;c&#39;, &#39;d&#39;]}
]
<select>
<optgroup label="A">
 <option value="a">a</option>
 <option value="b">b</option>
</optgroup>
<optgroup label="B">
 <option value="c">c</option>
 <option value="d">d</option>
</optgroup>
</select>

Copy after login

2. Option filtering
Your original data is most likely not in the format required here, so some data conversion must be done when dynamically generating options . To simplify this conversion, the options attribute supports filters. It's usually a good idea to make the data transformation logic into a reusable custom filter:

Vue.filter(&#39;extract&#39;, function (value, keyToExtract) {
return value.map(function (item) {
 return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract &#39;name&#39;">
</select>

Copy after login

The above filter will look like [{ name: 'Bruce' }, { name: 'Chuck' }] Such raw data is converted into ['Bruce', 'Chuck'], thus complying with the format requirements of dynamic options.

3. Static default option
In addition to dynamically generated options, you can also provide a static default option:

<select v-model="selectedUser" options="users">
<option value="">Select a user...</option>
</select>

Copy after login

The dynamically generated options based on users will be added after this static option. This default option is automatically selected if the bound value of v-model is a dummy value other than 0.

Input debounce
The debounce feature allows you to set a wait delay after each user event before an input is synchronized to the model. If the user enters again before this delay expires, the update will not be triggered immediately, but the waiting time of the delay will be reset. This is useful when you want to perform heavy lifting before each update, such as an ajax-based autocomplete feature. Effectively reduce repeated useless submissions

Note that the debounce parameter does not debounce the user's input event: it only "writes" the underlying data kick in. Therefore when using debounce, you should use vm.$watch() instead of v-on to respond to data changes.

The above is the entire content of this article, I hope it will be helpful to everyone’s study