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
Ce atribut face ca valoarea din caseta de text sa nu poata fi modificata de utilizator?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="valoare-fixa" readonly="readonly" name="a_name" />
Ce proprietate CSS permite crearea de colturi rotunjite?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
Ce instructiune afiseaza o fereastra cu mesaj si butoane OK si Cancel?
indexOf() confirm() prompt()
var ques = window.confirm("Rezultatul lui 0+0 este 0?");
if (ques) alert("Corect");
else alert("Incorect");
Indicati functia PHP care returneaza numarul cel mai mic dintr-o multime de numere.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Alegeti verbul corect care trebuie in propozitia: "Its ears ... big".
are is has
Its ears are big.
- Urechile lui sunt mari.
Alegeti verbul corect care trebuie in propozitia: "Los niños ... deportistas"
soy son está
Los niños son deportistas.
- Copii sunt sportivi.
Creare Liste cu v-for

Last accessed pages

  1. Preluare date din formular si adaugare in MySQL (2524)
  2. Curs CSS Online Tutoriale CSS3 (113104)
  3. Substantive - Exercitii si teste engleza incepatori (31386)
  4. Lectii audio-video de limba engleza (20572)
  5. Exercitii engleza - English Tests and exercises - Grammar (84825)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (334)
  2. Curs HTML gratuit Tutoriale HTML5 (233)
  3. Curs CSS Online Tutoriale CSS3 (231)
  4. Curs si Tutoriale Ajax (222)
  5. Curs si Tutoriale JavaScript (210)