Home > Developer > JavaScript
Processing Form of Vue. JS getting started tutorial, vue. js getting started tutorial form
The examples in this article share the content related to Vue. JS form processing for your reference. The specific content is as follows:
Basic usage
<!DOCTYPE html>Inert update
By default, v-model synchronizes the input data after each input event. You can add a lazy feature and change it to synchronize only after the change event.<! -- Synchronize after the "change" instead of "input" event is triggered --> <input v-model = "msg" lazy>Convert to numeric
If you want to automatically convert user input to numbers, you can add a number feature on the input where v-model is located. I don't know why the test was successful.<Input v-model = "age" number>
Binding expression
When using the v-model in a single sequence and a check box, the bound value can be a Boolean value or a string:<! -- Toggle is true or false --> <input type = "checkbox" v-model = "toggle"> <! -- When a single sequence is selected, pick is "red" --> <input type = "radio" v-model = "pick" value = "red">There is a small limitation here-sometimes we want to bind the value behind it to something else. You can use the following example:
1. Check box
<Input type = "checkbox" v-model = "toggle" true-exp = "a" false-exp = "B"> // vm when selected. toggle === vm. a // when it is deselected: vm. toggle === vm. B2. Single region
<Input type = "radio" v-model = "pick" exp = "a"> // when selected: vm. pick = vm.Dynamic select option
When you need to provide an <select> element dynamic rendering list option, we recommend that you use the options feature with the v-model command so that when the option changes dynamically, v-model will be correctly synchronized:<Select v-model = "selected" options = "myOptions"> </select>
In your data, myOptions should be a path or expression pointing to the option array.
This optional array can contain a simple array:Options = ['A', 'B', 'C']
You can also include objects in the format of {text: '', value. The format of this object allows you to set options to display text differently from the values behind it:
options = [ { text: 'A', value: 'a' }, { text: 'B', value: 'b' }]Will be rendered
<select> <option value="a">A</option> <option value="b">B</option></select>1. Quota Group
In addition, the object format in the array can also be {label: '', options: [...]}. Such data will be rendered into a <optgroup>:[{ label: 'A', options: ['a', 'b']},{ label: 'B', options: ['c', 'd']}]<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 raw data is probably not in the format required here, so some data conversion is required when you dynamically generate the option. To simplify this conversion, the options feature supports filters. It is usually a good idea to make the data conversion logic into a reusable custom filter:Vue.filter('extract', function (value, keyToExtract) {return value.map(function (item) { return item[keyToExtract]})})<selectv-model="selectedUser"options="users | extract 'name'"></select>The above filter converts raw data like [{name: 'Bruce '}, {name: 'Chuck'}] to ['Bruce ', 'Chuck'], to meet the format requirements of dynamic options.
3. Static default options
In addition to the 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 options dynamically generated based on users will be added to the end of this static option. If the bound value of v-model is a pseudo value other than 0, this default option is automatically selected.
Enter debounce
Before an input is synchronized to the model, the debounce feature allows you to set a wait delay after each user event. If the user enters the item again before the delay expires, the update will not be triggered immediately, but the waiting time of the delay will be reset. It is useful when you need to execute heavy jobs before each update, for example, an ajax-based auto-completion function.Effectively reduce repeated useless submissions<Input v-model = "msg" debounce = "500">
Note that the debounce parameter does not debounce user input events: it only takes effect for the "write" Operation of the underlying data. Therefore, when debounce is used, you should use vm. $ watch () instead of v-on to respond to data changes.This article has been compiled into "Vue. js front-end component learning tutorial". You are welcome to learn and read it.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
