Curs Vuejs


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
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Creare Liste cu v-for

Last accessed pages

  1. Prezentul continuu - Exercitii si teste incepatori (36750)
  2. Adverbele in limba engleza - Adverbs (31858)
  3. Libertatea creatiei o fagaduieste pe a mea (30)
  4. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (56526)
  5. Coduri pt culori (66026)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (698)
  2. Curs HTML gratuit Tutoriale HTML5 (539)
  3. Coduri pt culori (454)
  4. Creare si editare pagini HTML (358)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (336)