Vue-ում զանգվածների ռեակտիվություն

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

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

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

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

Задание 1

Տրված է կոճակ։ Տրված է զանգված։ Արտածեք այս զանգվածի տարրերը որպես ul ցուցակ։ Անեք, որ կոճակի սեղմման դեպքում այս ցուցակի վերջում ավելանա նոր կետ։

Задание 2

Տրված է կոճակ։ Տրված է զանգված։ Արտածեք այս զանգվածի տարրերը որպես ul ցուցակ։ Անեք, որ յուրաքանչյուր անգամ կոճակի սեղմման դեպքում ցուցակից հեռանա առաջին կետը։

Задание 3

Տրված է կոճակ։ Տրված է զանգված։ Արտածեք այս զանգվածի տարրերը որպես ul ցուցակ։ Անեք, որ յուրաքանչյուր անգամ կոճակի սեղմման դեպքում ցուցակից հեռանա վերջին կետը։

Задание 4

Տրված է կոճակ։ Տրված է զանգված։ Արտածեք այս զանգվածի տարրերը որպես ul ցուցակ։ Անեք, որ յուրաքանչյուր անգամ կոճակի սեղմման դեպքում ցուցակից հեռանա նախավերջին կետը։

Задание 5

Տրված է կոճակ։ Տրված է զանգված։ Արտածեք այս զանգվածի տարրերը որպես ul ցուցակ։ Անեք, որ կոճակի սեղմման դեպքում ցուցակի կետերը դասավորվեն։

Задание 6

Տրված է կոճակ։ Տրված է զանգված։ Արտածեք այս զանգվածի տարրերը որպես ul ցուցակ։ Անեք, որ կոճակի սեղմման դեպքում ցուցակի կետերը դասավորվեն հակառակ հերթականությամբ։