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

Clic pe tag-ul care creaza celula in tabel.

<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>

Indicati proprietatea CSS care adauga o imagine pentru fundal

background-color background-image color

h3 {
  background-image: url("image.jpg");
}

Ce instructiune se foloseste la parcugerea elementelor unui Array?

for() [) object()

var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };

Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.

for() foreach() if()

$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }

Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?

meek good beautiful

He is so kind and meek.
- El este atat de amabil si bland.

Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?

hermoso fuerte manso

Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.