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="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
#id {
font-style: italic;
}$(document).ready(function() {
$(".a_class").click(function(){ $(this).hide("slow"); });
});function fname($a, $b) {
echo $a * $b;
}