The Vue.js v-model directive can be used to update data of an HTML element based on user input events.
v-model will ignore the initial value, checked or selected attributes found on any form elements. It will get data from the Vue instance data object.

Test and study the following examples.


Input text field

<div id='demo'>
<input type='text' value='Ignored' v-model='msg' placeholder='Edit me'>
<p>Message is: {{ msg }}</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{msg:''}
});
</script>

Textarea field

<div id='demo'>
<textarea style='height:80px; width:250px;' v-model='msg' placeholder='Add multiple lines'></textarea><br>
Message is:
<div style='height:80px; white-space:pre-line; width:200px;'>{{ msg }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{msg:''}
});
</script>
Interpolation on textareas (<textarea>{{text}}</textarea>) won't work. Use v-model='text' instead.

The lazy modifier

By default, for text and textarea elements, v-model emits the input event. You can add the lazy modifier to sync with data after change event.

- Example:
<div id='demo'>
Without lazy modifier <input type='text' v-model='msg' placeholder='Edit me'>
<p>Message is: {{ msg }}</p>
v-model with lazy modifier <input type='text' v-model.lazy='msg2' placeholder='Edit and click outside'>
<p>Message is: {{ msg2 }}</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{msg:'', msg2:''}
});
</script>
If you want whitespace from user input to be trimmed automatically, you can add the trim modifier: v-model.trim='msg'.

Checkbox input element

1. Single checkbox, boolean value.

<div id='demo'>
<input type='checkbox' id='chb1' v-model='checked'>
<label for='chb1'>{{ checked }}</label>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{checked:false}
});
</script>

2. For checkbox which aren't bound to an Array, v-model binding values are True or False. If you want other values for checkbox, use the true-value and false-value attributes, like in the following example:

<div id='demo'>
<input type='checkbox' id='chb1' v-model='checked' true-value='yes' false-value='no'>
<label for='chb1'>{{ checked }}</label>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{checked:'no'}
});
</script>

3. Multiple checkboxes, bound to the same Array.

<div id='demo'>
<label><input type='checkbox' value='one' v-model='chk_val'> One</label>
<label><input type='checkbox' value='two' v-model='chk_val'> Two</label>
<label><input type='checkbox' value='three' v-model='chk_val'> Three</label>
<div>Checked values: {{ chk_val }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{chk_val:[] }
});
</script>

Radio buttons

<div id='demo'>
<label><input type='radio' value='one' v-model='num'> One</label><br>
<label><input type='radio' value='two' v-model='num'> Two</label><br>
<label><input type='radio' value='three' v-model='num'> Three</label>
<div>Checked number: {{ num }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{num:''}
});
</script>

Select list

1. Single select dropdown list.

<div id='demo'>
<select v-model='selected'>
<option disabled value=''>Select an option</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {{ selected }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{selected:''}
});
</script>
If the initial value of your v-model expression does not match any of the options, the <select> element will render in an "unselected" state. It is recommended to provide a disabled option with an empty value, like in the example above..

2. Multiple select (bound to an Array).

<div id='demo'>
<select v-model='selected' multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div>Selected: {{ selected }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{selected:[]}
});
</script>

3. Dynamic select dropdown list (with v-for).

<div id='demo'>
<select v-model='selected'>
 <option v-for='opt in options' v-bind:value='opt.val'>{{ opt.txt }}</option>
</select>
<div>Selected: {{ selected }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{
 selected:'A',
 options:[
 {txt:'One', val:'A'},
 {txt:'Two', val:'B'},
 {txt:'Three', val:'C'}
 ]
 }
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Using v-model in form input fields

Last accessed pages

  1. Ajax script to Save Canvas Image on Server (4143)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (49907)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (17703)
  4. JavaScript code and PHP (25341)
  5. Contact page - CoursesWeb (21727)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1272)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1241)
  3. Tabs effect with CSS (1229)
  4. Contact page - CoursesWeb (1227)
  5. Insert, Select and Update NULL value in MySQL (729)