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>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250"> <param name="src" value="file.swf" /> Your browser not support SWF. </object>
input:focus { background-color: #88fe88; }
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}'; var obj = JSON.parse(jsnstr); alert(obj.url);
if (file_put_contents("file.txt", "content")) echo "The file was created"; else echo "The file can not be created";