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 tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Creare Liste cu v-for

Last accessed pages

  1. Curs HTML gratuit Tutoriale HTML5 (32793)
  2. Lucrul cu stiluri CSS (2774)
  3. Articolul din limba engleza - The article (26190)
  4. Confusable words - Cuvinte confundabile - Test Engleza (1416)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (35871)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3122)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2512)
  3. Gramatica limbii engleze - Prezentare Generala (2357)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1961)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1611)