v-model
va ignora atributele initiale value, checked sau selected din elementele de formular. Va prelua datele din obiectul data de la instanta Vue.
<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>
) nu functioneaza. Utilizati in locul ei: v-model='text'
v-model
emite evenimentul input la elementele textarea si input. Se poate adauga modificatorul lazy
pentru a sincroniza datele dupa evenimentul change.<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
, precum: v-model.trim='msg'
.1. checkbox simplu, cu valoare booleana.
<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. Pentru checkbox care nu face parte dintr-un Array de elemente, valorile setate cu v-model
sunt True sau False. Daca doriti alte valori pentru checkbox, folositi atributele true-value
si false-value
, precum in urmatorul exemplu:
<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. Mai multe elemente checkboxe legate intr-un 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. Lista select de optiuni cu o singura selectare.
<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
nu se potriveste cu nici una dintre optiuni, elementul <select> va fi redat cu o stare "unselected". Este indicat sa adaugati o optiune cu atribut disabled si atributul value cu valoare goala, precum in exemplu de sus.2. Lista select de optiuni cu selectare multipla (legata la un 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. Lista select creata dinamic (cu 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>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
a:hover { font-weight: bold; color: #00da01; }
var num = 12.34567; num = num.toFixed(2); alert(num); // 12.35
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); var_export($arr);
What time is it? It is a quarter to 5. - Cat este ora? E 5 fara un sfert.
¿Qué hora es? Son las tres menos cuarto. - Cat este ora? E 3 fara un sfert.