This article has shared relevant content on 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="/ajax/libs/vue/0.12.16/"></script>
</head>
<body>
<form >
<!-- 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>data: {{$data | json 2}}</pre></p>
</form>
<script>
new Vue({
el: '#demo',
data: {
msg : 'hi!',
checked : true,
picked : 'one',
selected : 'two',
multiSelect: ['one', 'three']
}
});
</script>
</body>
</html>
Lazy update
By default, v-model synchronizes the input data after each input event. You can add a lazy feature that changes to synchronize only after the change event.
<!-- exist "change" Instead "input" Synchronize after the event is triggered --> <input v-model="msg" lazy>
Convert to numbers
If you want to automatically convert user input to numbers, you can add a number feature on the input where v-model is located. No trial was successful, no idea why
<input v-model="age" number>
Bind expression
When using v-model in radio and check boxes, the bound value can be a boolean value or a string:
<!-- toggle yes true or false --> <input type="checkbox" v-model="toggle"> <!-- When the radio box is selected pick yes "red" --> <input type="radio" v-model="pick" value="red">
There is a little limitation here - sometimes we want to bind the value behind it to something else. You can follow the following example:
1. Check box
<input type="checkbox" v-model="toggle" true-exp="a" false-exp="b"> // When selected: === // When unchecked: ===
2. Radio box
<input type="radio" v-model="pick" exp="a"> // When selected: ===
Dynamic select options
When you need to dynamically render a list option for a <select> element, it is recommended to use the options feature and the v-model directive so that when the options change dynamically, v-model will be synchronized correctly:
<select v-model="selected" options="myOptions"></select>
In your data, myOptions should be a path or expression pointing to an array of options.
This optional array can contain simple arrays:
options = ['a', 'b', 'c']
Or it can contain objects in the format such as {text:'', value:''}. This object format allows you to set options to allow the text to display different values from the ones behind it:
options = [
{ text: 'A', value: 'a' },
{ text: 'B', value: 'b' }
]
Will be rendered into
<select> <option value="a">A</option> <option value="b">B</option> </select>
1. Option group
In addition, the format of the object in the array can also be {label:'', options:[...]}. Such data will be rendered into an <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
There is a good chance that your raw data is not the format required here, so some data conversion is required when dynamically generating options. To simplify this conversion, the options feature supports filters. Making the conversion logic of the data into a reusable custom filter is usually a good idea:
('extract', function (value, keyToExtract) {
return (function (item) {
return item[keyToExtract]
})
})
<select
v-model="selectedUser"
options="users | extract 'name'">
</select>
The above filters convert raw data like [{ name: 'Bruce' }, { name: 'Chuck' }] into ['Bruce', 'Chuck'], thus meeting 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>
Options generated dynamically based on users will be added to this static option. If the binding value of v-model is a pseudo value other than 0, the default option is automatically selected.
Enter 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 delayed waiting time will be reset. It can be useful when you have to perform heavy jobs before each update, such as an autocomplete feature based on ajax.Effectively reduce duplicate useless submissions
<input v-model="msg" debounce="500">
Note that the debounce parameter does not debounce the user's input events: it only works for the "write" operation of the underlying data. So when using debounce you should use vm.$watch() instead of v-on to respond to data changes.
This article has been compiled intoFront-end component learning tutorial》, everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.