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>