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.
<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>
<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>
<textarea>{{text}}</textarea>
) won't work. Use v-model='text'
instead.v-model
emits the input event. You can add the lazy
modifier to sync with data after change event.<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>
trim
modifier: v-model.trim='msg'
.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>
<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>
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>
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>
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id { overflow: auto; }
document.getElementById("id").onmouseover = function(){ document.write("Have Good Life"); }
if(isset($_GET["id"])) { echo $_GET["id"]; }