Masyvų reaktyvumas Vue

Reaktyvumas veikia net ir pakeičiant masyvus, atvaizduojamus naudojant v-for. Pavyzdžiui, padarykime taip, kad paspaudus mygtuką į masyvą reaktyviai būtų pridedamas naujas elementas ir pakeitimai momentališkai atsispindėtų ir ekrane.

Įgyvendinkime aprašytą. Tarkime, kad turime masyvą:

javascriptdata() {
  return {
    arr: ['a', 'b', 'c'],
  }
}

Atvaizduokime šio masyvo elementus cikle:

App.vue<template>
  <p v-for="elem in arr">
    {{ elem }}
  </p>
</template>

Sukurkime mygtuką, kurį paspaudus į masyvą bus pridedamas naujas elementas:

App.vue<template>
  <p v-for="elem in arr">
    {{ elem }}
  </p>
  <button @click="add">add</button>
</template>

Įgyvendinkime atitinkamą metodą:

App.vuemethods: {
  add: function() {
    this.arr.push('xxx');
  }
}

Задание 1

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad paspaudus mygtuką į šio sąrašo pabaigą būtų pridėtas naujas punktas.

Задание 2

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad kaskart paspaudus mygtuką sąrašo būtų pašalinamas pirmasis punktas.

Задание 3

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad kaskart paspaudus mygtuką sąrašo būtų pašalinamas paskutinis punktas.

Задание 4

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad kaskart paspaudus mygtuką sąrašo būtų pašalinamas priešpaskutinis punktas.

Задание 5

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad paspaudus mygtuką sąrašo punktai būtų surūšiuoti.

Задание 6

Duotas mygtukas. Duotas masyvas. Atvaizduokite elemento šio masyvo sąrašo ul pavidalu. Padarykite taip, kad paspaudus mygtuką sąrašo punktai išsidėliotų atvirkštine tvarka.

Išimtys

Dėl JavaScript apribojimų, Vue negali pastebėti šių masyvo pakeitimų: tiesioginį elemento nustatymą pagal indeksą: items[raktas] = naujaReikšmė ir aiškų masyvo ilgio pakeitimą, pavyzdžiui: items.length = naujasIlgis.