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 ලැයිස්තුවක් ලෙස ප්‍රදර්ශනය කරන්න. බොත්තම එබූ විට ලැයිස්තු අයිතම ප්‍රතිලෝම අනුපිළිවෙලට සකසන පරිදි සකසන්න.