Utilizare v-model in campuri input in form

Directiva v-model din VueJS se poate utiliza pentru actualizarea continutului dintr-un element HTML in functie de datele adaugate intr-o caseta input.
v-model va ignora atributele initiale value, checked sau selected din elementele de formular. Va prelua datele din obiectul data de la instanta Vue.

Testati si studiati urmatoarele exemple.

Campuri de text Input

<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>

Campuri Textarea

<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>

Interpolarea la textarea (<textarea>{{text}}</textarea>) nu functioneaza. Utilizati in locul ei: v-model='text'

Modificatorul lazy

In mod implicit, directiva v-model emite evenimentul input la elementele textarea si input. Se poate adauga modificatorul lazy pentru a sincroniza datele dupa evenimentul change.

- Exemplu:

<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>

Daca doriti ca spatiul liber de la inceputul si sfarsitul textului adaugat sa fie sters automat, adaugati modificatorul trim, precum: v-model.trim='msg'.

Elemente Checkbox

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>

Butoane Radio

<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>

Lista Select

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>

Daca valoarea initiala a expresiei de la 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>

<<-Class si Style cu .. -- Vue JS - Tranzitie ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag este element de tip bloc?

<div>Web Programming and Development</div>

Care cod CSS afiseaza textul subliniat?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".

has't played haven't been playing will haven't played

The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.

Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".

habrá contado va a contar contaba

Él no habrá contado el cuento.
- El nu ar fi spus povestea.