Home > Article > Web Front-end > Vue.JS introductory tutorial for processing forms

Vue.JS introductory tutorial for processing forms

高洛峰Original: 2016-12-03 10:32:511182browse

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}}

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>

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

bc3a745ade46aea43913a82bbd8501d0

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">

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

2. Radio button

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

Dynamic select option
When you need to dynamically render list options for a 221f08282418e2996498697df914ce4e element, It is recommended to use the options attribute with the v-model directive, so that when the options change dynamically, v-model will be synchronized correctly:

e57d50fce680466b479a2f32cc4092cc0ee4a9d1e9658309d99c84c0fbbe5b25:

[
{ 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>

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>

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>

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

82ddc4b28363de60a9d851e978fbb3a6
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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Vue.JS introductory tutorial list renderingNext article：Vue.JS introductory tutorial list rendering

See more

Vue.JS introductory tutorial for processing forms

Related articles