Liste HTML cu v-for cu date din array

Directiva v-for se poate folosi pentru a reda elemente HTML cu date dintr-un array, de exemplu pentru creare liste cu tagul LI.

Sintaxa:
<ul id='idul'>
 <li v-for='item in items'>{{ item }}</li>
</ul>
- items e sursa cu array-ul.
- item contine elementul curent din array-ul parcurs.

Exemplu:
<ul id='idul'>
 <li v-for='item in items'>{{ item }}</li>
</ul>

<script>
const ul_items =[ 'Mar', 'Plo' ];

var vm = new Vue({
 el:'#idul',
 data: {
 items: ul_items
 }
});
</script>

v-for suporta un al doilea argument optional pentru indexul elementului curent.
Sintaxa:
<ul id='idul'>
 <li v-for='(item, index) in items'>{{ index }} - {{ item. }}</li>
</ul>

Exemplu:
<ul id='idul'>
 <li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>

<script>
const ul_items =[ 'Mar', 'Plo' ];

var vm = new Vue({
 el:'#idul',
 data: {
 items: ul_items
 }
});
</script>
Se poate folosi si sintaxa cu of in loc de in, astfel e similar cu sintaxa JavaScript:
<ul id='idul'>
 <li v-for='item of items'>{{ item }}</li>
</ul>

v-for cu un obiect

v-for se poate utiliza pentru a traversa proprietatile unui obiect. In cod se poate folosi in sau of.
<ul id='idul'>
 <li v-for='val in obj'>{{ val }}</li>
</ul>

<script>
const ul_obj ={
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
}

var vm = new Vue({
 el:'#idul',
 data: {
 obj: ul_obj
 }
});
</script>

Se poate adauga si un al doilea argument pentru numele proprietatii.
Sintaxa:
<ul id='idul'>
 <li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>

Exemplu:
<ul id='idul'>
 <li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>

<script>
const ul_obj ={
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
}

var vm = new Vue({
 el:'#idul',
 data: {
 obj: ul_obj
 }
});
</script>

Cand se foloseste cu un obiect, v-for suporta si un al treilea argument pentru indexul numeric.
Sintaxa:
<ul id='idul'>
 <li v-for='(val, key, index) in obj'>{{index}} - {{ key }} : {{ val }}</li>
</ul>

Exemplu:
<ul id='idul'>
 <li v-for='(val, key, ix) in obj'>{{ ix }} - {{key}}: {{ val }}</li>
</ul>

<script>
const ul_obj ={
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
}

var vm = new Vue({
 el:'#idul',
 data: {
 obj: ul_obj
 }
});
</script>

v-for - detectare modificari in sursa

Cand e adaugat, sters sau schimbat un element din array-ul sau obiectul sursa, Vue va actualiza lista din HTML.
Puteti utiliza metodele JavaScript pentru Array si Obiecte. Testati si studiati urmatoarele exemple.

1. Adaugare element nou la inceputul listei:
<div id='demo'>
<button v-on:click='addMsg'>Add item</button>
<ul id='idul'>
 <li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 items: [ 'Mar', 'Plo' ]
 },
 methods:{
 addMsg:function(ev){
 this.items.unshift('Hello');
 }
 }
});
</script>
2. Stergere element de la inceputul listei:
<div id='demo'>
<button v-on:click='delFirst'>Delete First item</button>
<ul id='idul'>
 <li v-for='(item, ix) in items'>{{ ix }} - {{ item }}</li>
</ul>
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 items: [ 'Mar', 'Plo' ]
 },
 methods:{
 delFirst:function(ev){
 this.items.shift();
 }
 }
});
</script>
3. Modificare un anumit element dintr-o lista cu elemente dintr-un obiect:
<div id='demo'>
Change language: <input type='text' v-on:input='setLang'/>
<ul id='idul'>
 <li v-for='(val, key) in obj'>{{ key }} - {{ val }}</li>
</ul>
</div>

<script>
var vm = new Vue({
 el:'#demo',
 data: {
 obj: {
 title: 'Vue.js Tutorial',
 code: 'JavaScript',
 language: 'English'
 }
 },
 methods:{
 setLang:function(ev){
 this.obj.language = ev.target.value;

 //Or with this code
// this.$set(this.obj, 'language', ev.target.value);
 }
 }
});
</script>

Date pentru liste direct in v-for

Se poate adauga array-ul sau obiectul cu elemente direct la directiva v-for.

1. Exemplu cu array in v-for:
<ul id='idul'>
 <li v-for='item in ["Mar", "Plo", "site"]'>{{ item }}</li>
</ul>

<script>
var vm = new Vue({
 el:'#idul'
});
</script>
2. Exemplu cu obiect in v-for:
<ul id='idul'>
 <li v-for='(val, key) in {"Tutorial":"Vue JS", "Code":"JavaScript"}'>{{ key }} - {{val}}</li>
</ul>

<script>
var vm = new Vue({
 el:'#idul'
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Creare Liste cu v-for

Last accessed pages

  1. Viitorul - Verbul la viitor (1937)
  2. Gradele de comparatie: comparative, superlative (18392)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (60007)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (70061)
  5. Utilizare array 2 (549)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2380)
  2. Curs HTML gratuit Tutoriale HTML5 (1703)
  3. Curs si Tutoriale JavaScript (1668)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1617)
  5. Curs CSS Online Tutoriale CSS3 (1500)